长沙网站建设icp备,淮北手机网站建设公司,公司网站策划宣传,网站内容建设一、原因
因vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入#xff0c;故须保持跟后台用同一份数据#xff0c;所以考虑以下几个组件
1、Area
2、Cascader
3、Picker
因为使用的是高德地图的省市区json文件#xff0c;用area的话修改结构代价太大vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入故须保持跟后台用同一份数据所以考虑以下几个组件
1、Area
2、Cascader
3、Picker
因为使用的是高德地图的省市区json文件用area的话修改结构代价太大费时费力。接着尝试使用Cascader组件但这个组件每列数据过多时会滑动、点击卡顿等等故也排除只剩最后的picker了
Cascader卡顿 二、使用 刚开始看文档这个结构一时没有理解有点懵后面经过研究发现需要如下结构
以高德gaode-area.json为例点击就可以下载高德省市区数据包含压缩和未压缩的
因为想减少小程序的体积故把文件丢到服务器上了
2.1、页面代码 van-field namearea model:value{{ area }} label地区选择 placeholder请选择地区 clearable readonly is-link data-popupsshowArea bind:click-inputshow_popup /!-- 省市区 --
van-popup show{{ showArea }} positionbottom round data-popupsshowArea bind:closehide_popupvan-picker columns{{ addrs }} show-toolbar title地区选择 value-keyname bind:changeonAreaChange data-popupsshowArea bind:confirmonAreaConfirm bind:cancelhide_popup /
/van-popup
2.2、js代码
// 主要jsgetAreas() {let that thiswx.request({url: ${app.globalData.urls}/gaode-area.json,header: {},success(res) {let result res.data.districts[0].districtslet arrs [{values: result}, {values: result[0].districts,defaultIndex: 0,}, {values: result[0].districts[0].districts,defaultIndex: 0,}]that.setData({addrs: arrs})}})},// 省市区变动onAreaChange(e) {const {picker,value,index} e.detail;if (index 0) {// 修改省picker.setColumnValues(1, value[0].districts);picker.setColumnValues(2, value[0].districts[0].districts);} else if (index 1) {// 修改市picker.setColumnValues(2, value[1].districts);}},// 确认选择省市区onAreaConfirm(e) {let value e.detail.valuelet addr_value ${value[0].name}${value[1].name}${value[2].name};this.setData({province: value[0].name, // 省份city: value[1].name, // 城市district: value[2].name, // 区县province_adcode: value[0].adcode,city_adcode: value[1].adcode,district_adcode: value[2].adcode,area: addr_value,showArea: false,})},
2.3、效果 三、 注意事项
在开发者工具上预览和使用会明显感觉到滑动点击卡顿但在真机手机预览的时候不会出现卡顿问题体验感不错发布了之后用正式版测目前也没有发现问题
