微信小程序 滚动选择器(时间日期)详解及实例代码

view  picker bindchange="bindPickerChange" value="{{index}}" range="{{objectArray}}" mode = "selector" view  国家:{{objectArray[index]}} /view /picker /view view  picker mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange" view  时间 : {{times}} /view /picker /view view  picker mode="date" value="{{date}}" start="1978-01-01" end="2017-1-23" bindchange="bindDateChange" view  日期: {{dates}} /view /picker /view 

谢谢阅读,希望能扶持到大家,多谢大家对本站的扶持!

那个功效呢,要用到picker组件,动漫从底层弹起的轮转选拔器,现扶助二种接收器,通过mode来分别,分别是常常选拔器,时间接选举用器,日期选取器,私下认可是平常接收器。

Wechat小程序本人包裹了广大控件,用起来着实很方便,假设那是Android里面,还索要团结去定义,不赘述,效果图:

js代码:

看下相应的习性:

具体的来拜见代码,构造:

Page({ data: { dates: '2016-11-08', times: '12:00', objectArray: ['中国', '英国', '美国'], index: 0, }, // 点击时间组件确定事件 bindTimeChange: function (e) { console.log("谁哦按") this.setData({ times: e.detail.value }) }, // 点击日期组件确定事件 bindDateChange: function (e) { console.log(e.detail.value) this.setData({ dates: e.detail.value }) }, // 点击城市组件确定事件 bindPickerChange: function (e) { console.log(e.detail.value) this.setData({ index: e.detail.value }) }

Wechat小程序 滚动选用器(时间日期卡塔尔国详细解释

代码很简短,分别绑定事件,点击切换就Ok。

css样式:

.section{ background:#CABBC7; margin:20rpx; padding:20rpx}

联合来会见怎么贯彻的吧?看完你应有就该说,尼玛,那就可以呐….

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图