微信小程序---picker

picker

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

 

 

 

wxml:

普通选择器（mode = selector）

<view class='cell-picker'>
<view class='cell-name'>chengshi</view>
<view class='cell-val'>
<picker mode = "selector"  bindchange="bindPickerChangeType" range-key="{{'Name'}}" value="{{indexType}}" range="{{array}}">{{array[indexType].Name}}</picker>
</view>
</view>

mode = selector：普通选择器

bindchange：value 改变时触发 change 事件

range-key: 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

value: value 的值表示选择了 range 中的第几个（下标从 0 开始）

range: mode为 selector 或 multiSelector 时，range 有效。

data:{　

array: [

{

" Name": "shanghai",

"Id": "020"

}, {

"Name": "beijing ",

"Id": "005"

}, {

"Name": "tianjin",

"Id": "030"

}

],

indexType: 0, //选择了 range 中的第几个（下标从 0 开始）

}

//点击

bindPickerChangeType: function (e) {

console.log('picker发送选择改变，携带值为', e.detail.value)

this.setData({

indexType: e.detail.value

})

},

 

转载于:https://www.cnblogs.com/Super-scarlett/p/10039383.html