微信小程序 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()
}
},
点击确定回显刚刚选中的地区文章来源:https://www.toymoban.com/news/detail-493418.html
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感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞
收藏谢谢~!
关注收藏博客 作者会持续更新…文章来源地址https://www.toymoban.com/news/detail-493418.html
到了这里,关于微信小程序 u-picker 三级联动 uView的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!