One, cause
Because the city/district data in the @vant/area-data part is different from the AutoNavi/Tencent provinces and cities used in the backend, it is necessary to keep using the same data as the backend, so consider the following components
1、Area
2、Cascader
3、Picker
Because the province and city json files of Amap are used, modifying the structure using area is too expensive, time-consuming and labor-intensive. Then I tried to use the Cascader component, but when there was too much data in each column of this component, it would slide, click and freeze, etc., so I excluded it, leaving only the last picker.
2. Use
When I first read the document, I didn’t understand the structure and was a little confused. Later, after research, I found that the following structure is needed.
TakeGaode-area.json as an example. Click to download Gaode province and city data (including compressed and uncompressed )
Because I want to reduce the size of the mini program, I threw the file on the server.
2.1. Page code
<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 code
// 主要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. Effect
3. Precautions
When previewing and using the developer tools, you will obviously feel sliding and click lag. However, there will be no lag problem when previewing on a real machine or mobile phone. The experience is good. After the release, I tested it with the official version and found no problems so far.