微信小程序 u-picker 三级联动 uView

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