微信小程序 u-picker 三级联动 uView
- 场景
移动端微信小程序框架 uView 中的 u-picker 实现三级联动 数据是一级一级加载的
[12,1201,120101] 多列联动
先了解属性参数
- mode可以设置为：time、region、selector、multiSelector，区分时间、地区、单列，多列模式。
- default-region ：设置默认的地区如：[“13”, “1303”, “130304”]
- params：province、city、area，默认都为true
- default-selector：默认初始值：‘[0, 1, 3]’
- range-key：组件内部知道您想把对象的哪个属性当做要显示的值
- @confirm：确定的方法 回调参数：column表示第几列发生了变化(从0开始)，index表示当前的下标值
- @cancel：取消的方法 回调参数：column表示第几列发生了变化(从0开始)，index表示当前的下标值
- @columnchange：列发生改变时触发，只对mode = multiSelector时有效
以上就是关于区域的基本属性还有其他时间等属性可以去官网查看
代码
HTML
<view class="" @click="areaFun">{{form.area_name}}</view> // 点击展开弹窗
<u-picker :params="params" :default-selector="defaultAddress" ref="uPicker" v-model="areaShow"mode="multiSelector" :range="codeList" range-key="name"@columnchange="columnCode" @confirm="conserveCode"></u-picker>
JS
亿点小知识：vue2.0 复杂数据更新数据不会更新视图所以这里使用的强制更新 this.$forceUpdate()
async areaFun() {let data = await addressCode() // 接口获取省市区的方法 默认返回省的方法// 初始化数据this.codeList = [[], //省[], //市[] // 区]this.codeList[0] = data.data.map((item) => { // 赋值 省的数据return {code: item.code,name: item.name}})this.$forceUpdate()// 赋值 市的数据let datc = await addressCode(this.codeList[0][0].code) // 这里默认展示第一个this.codeList[1] = datc.data.map((item) => {return {code: item.code,name: item.name}})this.$forceUpdate()// 赋值 区的数据let dat = await addressCode(this.codeList[1][1].code)this.codeList[2] = dat.data.map((item) => {return {code: item.code,name: item.name}})this.$forceUpdate()this.areaShow = true // 显示弹框
},
@columnchange：列发生改变时触发时的代码
async columnCode(e) {if (e.column == 0) { // 滑动第一列 更改第二列的数据 let datc = await addressCode(this.codeList[0][e.index].code)this.codeList[1] = datc.data.map((item) => {return {code: item.code,name: item.name}})this.$forceUpdate()let dat = await addressCode(this.codeList[1][0].code)this.codeList[2] = dat.data.map((item) => {return {code: item.code,name: item.name}})this.$forceUpdate()}if (e.column == 1) { // 滑动第二列 更改第三列的数据 let dat = await addressCode(this.codeList[1][e.index].code)this.codeList[2] = dat.data.map((item) => {return {code: item.code,name: item.name}})this.$forceUpdate()}},
点击确定回显刚刚选中的地区
conserveCode(e) { // 确定this.form.area_name =`${this.codeList[0][e[0]].name}/${this.codeList[1][e[1]].name}/${this.codeList[2][e[2]].name}`}
以上就是微信小程序 u-picker 三级联动 uView感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
