效果
从手机底部弹出上拉框,展示用户列表,通过滚动列表选择用户,点击确定选中。
wxml
<picker bindchange="bindPickerChange" value="{{index}}" range='{{array}}'
range-key="name" data-id='{{array[index].id}}' data-name='{{array[index].name}}'
class="weui-btn btn-css" >
点我弹出选择器
</picker>
使用微信小程序提供的picker标签完成选择器效果,这里对属性进行一下说明:
bindchange: 点击确认后触发的方法
value: 用于获取需要的下标
range: 要加载的列表
range-key: 列表内容,例如用户列表中要展示每个用户姓名,填入字段名即可
data-xxx: 用于获取选中记录的一些附加信息,data-是开头,后面名字自己随便取
全局变量
data: {
array: null,
index:0,
}
index下标默认为0,array就是从后台获取的列表:
数组格式如下:
JS
bindPickerChange: function(e) {
var that = this;
console.log(e)
console.log("选中的id值:"+that.data.array[e.detail.value].name);
console.log("选中的姓名值:"+that.data.array[e.detail.value].id)
that.setData({
index: e.detail.value,
})
},
点击确定后,进入bindPickerChange方法,得到选中记录值:
据说点赞的都升职加薪了~