微信小程序把玩《六》：picker组件,radio组件,slider组件.pdf

微信小程序把玩《六》：picker 组件，radio 组件，slider 组件 一：picker 组件 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(){ // 页面关闭 } }) 二：radio 组件 radio 组件为单选组件与 radio-group 组合使用，使用方式和 checkbox 没啥区别 主要属性： wxml !--设置监听器，当点击 radio 时调用-- radio-group bindchange=listenerRadioGroup !--label 通常与 radio 和 checkbox 结合使用-- label style=display: flex wx:for-items={{array}} radio value={{item.name}} checked={{item.checked}}/{{item.value}} /label /radio-group js Page({ data:{ array:[ {name: Jave, value: Android, checked: true}, {name: