一、原因
因@vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入,故须保持跟后台用同一份数据,所以考虑以下几个组件
1、Area
2、Cascader
3、Picker
因为使用的是高德地图的省市区json文件,用area的话修改结构代价太大,费时费力。接着尝试使用Cascader组件,但这个组件每列数据过多时会滑动、点击卡顿等等,故也排除,只剩最后的picker了
Cascader卡顿:
二、使用
刚开始看文档这个结构一时没有理解,有点懵,后面经过研究发现需要如下结构
以高德gaode-area.json为例,点击就可以下载高德省市区数据(包含压缩和未压缩的)
因为想减少小程序的体积,故把文件丢到服务器上了
2.1、页面代码
<van-field name="area" model:value="{{ area }}" label="地区选择" placeholder="请选择地区" clearable readonly is-link data-popups="showArea" bind:click-input="show_popup" />
<!-- 省市区 -->
<van-popup show="{{ showArea }}" position="bottom" round data-popups="showArea" bind:close="hide_popup">
<van-picker columns="{{ addrs }}" show-toolbar title="地区选择" value-key="name" bind:change="onAreaChange" data-popups="showArea" bind:confirm="onAreaConfirm" bind:cancel="hide_popup" />
</van-popup>
2.2、js代码
// 主要js
getAreas() {
let that = this
wx.request({
url: `${app.globalData.urls}/gaode-area.json`,
header: {},
success(res) {
let result = res.data.districts[0].districts
let 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.value
let 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、效果
文章来源:https://www.toymoban.com/news/detail-660283.html
三、 注意事项
在开发者工具上预览和使用会明显感觉到滑动,点击卡顿,但在真机,手机预览的时候不会出现卡顿问题,体验感不错,发布了之后用正式版测目前也没有发现问题文章来源地址https://www.toymoban.com/news/detail-660283.html
到了这里,关于小程序-基于vant的Picker组件实现省市区选择的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!