1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序把玩(十八)picker组件

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

时间:2019-10-29 12:31:48

相关推荐

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

为什么80%的码农都做不了架构师?>>>

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="-09-26" end="-10-10" bindchange="listenerDatePickerSelected"> <text>{{date}}</text> </picker>

js

Page({data:{// text:"这是一个页面"array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],index: 0,time: '08:30',date: '-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(){// 页面关闭}})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。