加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

微信小程序---picker

发布时间:2020-12-16 23:41:02 所属栏目:百科 来源:网络整理
导读:picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。 ? ? ? wxml: 普通选择器( mode = selector ) view class=‘cell-picker‘ view class=‘cel

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
})
},

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读