微信小程序 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感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
