picker 组件，radio 组件，slider 组件

一

picker 组件

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

普通选择器

时间选择器

日期选择器

wxml

普通选择器

{}

时间选择器

{}

日期选择器

bindchange="listenerDatePickerSelected">

{}

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

{}

js

Page({

data:{

array:[

,

,

,

,

,

]

},

/**

* radio 监听事件

*/

listenerRadioGroup:function(e) {

console.log(e);

},

onLoad:function(options){

// 页面初始化 options 为页面跳转所带来的参数

},

onReady:function(){

页面渲染完成

},

onShow:function(){

页面显示

},

onHide:function(){

页面隐藏

},

onUnload:function(){

页面关闭

}

})

三

slider 组件

slider 滑动组件用的不太多，在其他平台反正我是用的不多

主要属性：

wxml

max="100"

step="10"

show-value="true"

bindchange="listenerSlider"

/>

js

Page({

data:{

// text:"这是一个页面"

},

/**

监听 slider

*/

listenerSlider:function(e) {

//获取滑动后的值

console.log(e.detail.value);

},

onLoad:function(options){

// 页面初始化 options 为页面跳转所带来的参数

},

onReady:function(){

页面渲染完成

},

onShow:function(){

页面显示

},

onHide:function(){

页面隐藏

},

onUnload:function(){

页面关闭

}

})