小程序官网关于picker的介绍
https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
小程序官网提供了5中选择器,分别是:
普通选择器
多列选择器
时间选择器
日期选择器
省市区选择器
以下仅列举省市区选择器的用法:
省市区选择器效果图
使用
index.wxml
<view class="section">
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>
</view>
index.js
Page({
data: {
region: ['广东省', '广州市', '海珠区'], // 初始值
},
onLoad: function () {
},
bindRegionChange: function (e) { // picker值发生改变都会触发该方法
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
总结:
多看文档,不然又要自己封装了。。。