uview2.x u-picker省市区三级联动

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

uview2.x u-picker省市区三级联动
前言
二、使用步骤
- 1.页面标签
- 2.加载省市区数据
- 3.滑动后进行数据变化
- 4.点击确认
- 5.回填
总结

前言

提示：这里可以添加本文要记录的大概内容：

搜索了很多网上素材，要么是uview1.x的三级联动，要么是不合适，所以我自己研究了下代码，官网给的静态数据一开始没看明白，把数据都分开了，后面才发现，默认开始显示第二列的是第一列的选中后的数据，这是运行后的结果

二、使用步骤

1.页面标签

<u-picker keyName="name" :show="isAddress" @cancel="isAddress=false" ref="uPicker" class="uPicker":columns="addressColumns" @confirm="addressConfirm" @change="changeHandler" :defaultIndex="defaultAddress">data(){return {defaultAddress: [],addressColumns: [],addressData:[]
}
}

2.加载省市区数据

代码如下（示例）：初始化

let {provinceData,cityData,areaData} = city;let arr=[];let province=[];let arr1=[];let arr2=[];provinceData.forEach((item, index) => {arr.push({...item,children: []});arr[index].children.push(...cityData[index]);arr[index].children.forEach((item1, index1) => {item1['children'] = [];item1.children.push(...areaData[index][index1]);});});province=arr.map(e=>{return e.label});arr1=arr[0].children.map(e=>{return e.label});arr2=arr[0].children[0].children.map(e=>{return e.label});this.addressColumns=[province,arr1,arr2]this.addressData=arr;

3.滑动后进行数据变化

代码如下（示例）：

changeHandler(e) {const {columnIndex,value,values, // values为当前变化列的数组内容index,indexs,// 微信小程序无法将picker实例传出来，只能通过ref操作picker = this.$refs.uPicker} = e// 当第一列值发生变化时，变化第二列(后一列)对应的选项if (columnIndex === 0) {// picker为选择器this实例，变化第二列对应的选项let children1=this.addressData[index].children.map(e=>{return e.label})picker.setColumnValues(1, children1)// console.log(this.addressData[index].children[indexs[1]].children)let children2=this.addressData[index].children[indexs[1]].children.map(e=>{return e.label})picker.setColumnValues(2, children2)}if (columnIndex === 1) {// console.log("index",index,"indexs",indexs)let children3=this.addressData[indexs[0]].children[indexs[1]].children.map(e=>{return e.label})picker.setColumnValues(2, children3)}
},

4.点击确认

addressConfirm(e) {this.isAddress=false;this.addInfo.area=`${e.value[0]}-${e.value[1]}-${e.value[2]}`},

5.回填

let temp= item.area.split('-');let index,index1,index2=0;let arr,arr1,arr2=[];this.addressData.forEach((item, i) => {if(item.label==temp[0]){index=i;item.children.forEach((v,y)=>{if(v.label==temp[1]){index1=y;v.children.forEach((o,n)=>{if(o.label==temp[2]){index2=n;}})};})}});arr=this.addressData.map(e=>{return e.label});arr1=this.addressData[index].children.map(e=>{return e.label});arr2=this.addressData[index].children[index1].children.map(e=>{return e.label});this.addressColumns=[arr,arr1,arr2]this.defaultAddress=[index,index1,index2];

总结

希望我的代码可以给你帮助，有其他更好的写法可以一起分享，写的不好请勿喷
还有，当打包的小程序里面如果开发工具版本低的话会报setColumnValues is undefined，升级版本就可以
例如：以上就是今天要讲的内容，如果需要省市区的js可以去https://download.csdn.net/download/xiaoyou_xiaohe/85517461 这里面下载

uview2.x u-picker省市区三级联动相关推荐

微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
实战演练-java+微信小程序实现省市区三级联动
最终效果图官方的"省市区选择器"mode="region"里的数据是定死的由微信提供,不能做更改,好在同是picker组件mode="multiSe ...
uniapp 省市区三级联动
uniapp 省市区三级联动需求:小程序省市区三级联动,可在子节点存在时选择父节点(也就是说可以在区存在时选择市),同时满足可以根据不同用户权限展示出两级联动(列表无省),一级联动(列表无省市只有区 ...
（移动端）省市区三级联动
index.html <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...

uview2.x u-picker省市区三级联动

uview2.x u-picker省市区三级联动

文章目录

前言

二、使用步骤

1.页面标签

2.加载省市区数据

3.滑动后进行数据变化

4.点击确认

5.回填

总结

uview2.x u-picker省市区三级联动相关推荐

最新文章

热门文章