微信小程序 (十八)picker组件详细介绍
微信小程序 (十八)picker组件详细介绍
发布时间:2016-12-30 来源:查字典编辑
摘要:picker选择器分为三种,普通选择器,时间选择器,日期选择器用mode属性区分,默认是普通选择器。测试时时间和日期点击无反应不知道是BUG...

微信小程序 (十八)picker组件详细介绍1

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

主要属性:

普通选择器

微信小程序 (十八)picker组件详细介绍2

时间选择器

微信小程序 (十八)picker组件详细介绍3

日期选择器

微信小程序 (十八)picker组件详细介绍4

wxml

<view>普通选择器</view> <> <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(){ // 页面关闭 } })

相关文章:

hello WeApp icon组件

Window text组件switch组件

tabBar底部导航 progress组件action-sheet

应用生命周期button组件 modal组件

页面生命周期checkbox组件toast组件

模块化详form组件详 loading 组件

数据绑定input 组件 navigator 组件

View组件 picker组件 audio 组件

scroll-view组件 radio组件video组件

swiper组件 slider组件 Image组件

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类