文档章节

微信小程序把玩(十八)picker组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 327
阅读 10
收藏 0

这里写图片描述

picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!!

主要属性:

普通选择器

这里写图片描述

时间选择器

这里写图片描述

日期选择器

这里写图片描述

wxml

<view>普通选择器</view> <!--mode默认selector range数据源value选择的index bindchange事件监听--> <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected"> <text>{{array[index]}}</text> </picker> <view>时间选择器</view> <picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected"> <text>{{time}}</text> </picker> <view>日期选择器</view> <picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected"> <text>{{date}}</text> </picker> 

js

Page({
  data:{
    // text:"这是一个页面"
    array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
    index: 0,
    time: '08:30',
    date: '2016-09-26'
  },

  /** * 监听普通picker选择器 */
  listenerPickerSelected: function(e) {
      //改变index值,通过setData()方法重绘界面
      this.setData({
        index: e.detail.value
      });
  }, 

  /** * 监听时间picker选择器 */
  listenerTimePickerSelected: function(e) {
      //调用setData()重新绘制
      this.setData({
          time: e.detail.value,
      });
  },

  /** * 监听日期picker选择器 */
  listenerDatePickerSelected:function(e) {
    this.setDate({
      date: e.detail.value
    })
  },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52668460

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
私信 提问
uni-app 1.4 发布,一套代码,发行小程序(微信/支付宝/百度)、H5、App多个平台

在2019新年到来之际, 1.4版本正式发布,新增支持百度、支付宝小程序,开放插件市场,同时注入更多优秀特性,为开发者送上了一份新年大礼! 支持更多小程序平台 1.4 版本新增支持百度、支付宝...

CHB
01/03
0
0
零云lingyun.net技术分享之小程序开发地区三级联动

微信小程序里经常会遇到需要实现地区选择的功能,下面做一个简单分享,欢迎交流,产品开发解决方案零云lingyun.net 实现地区三级联选 1.picker 这是小程序自带的一个组件,用来实现单选。现支...

CoreThink
2017/06/19
301
1
mpvue开发大型体育项目及总结记

开篇 最近接到上头的指示,要做一个体育类的小程序,并且要在元旦之前上线一版,看了下时间,距离元旦只有一个多月,而且除去测试的时间和双休,最多只有三个星期,时间相当的紧迫,而且需求...

attitudes
01/07
0
0
你的年目标实现了吗,记一次开发微信小程序

前言:这是笔者第一次开发小程序,此前一直有打算自己做一个,并且能够上线使用,但一直找不到灵感,加上还需要服务器端、数据库等技能,所有一直没能实现。后来偶然看到微信小程序云开发(有...

雾空
2018/12/29
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部