一、原因

因@vant/area-data部分的市/區(qū)數(shù)據(jù)跟后臺使用的高德/騰訊省市區(qū)有所出入，故須保持跟后臺用同一份數(shù)據(jù)，所以考慮以下幾個組件

1、Area

2、Cascader

3、Picker

因為使用的是高德地圖的省市區(qū)json文件，用area的話修改結(jié)構(gòu)代價太大，費時費力。接著嘗試使用Cascader組件，但這個組件每列數(shù)據(jù)過多時會滑動、點擊卡頓等等，故也排除，只剩最后的picker了

Cascader卡頓：

?二、使用

剛開始看文檔這個結(jié)構(gòu)一時沒有理解，有點懵，后面經(jīng)過研究發(fā)現(xiàn)需要如下結(jié)構(gòu)

以高德gaode-area.json為例，點擊就可以下載高德省市區(qū)數(shù)據(jù)（包含壓縮和未壓縮的）

因為想減少小程序的體積，故把文件丟到服務(wù)器上了

2.1、頁面代碼

 <van-field name="area" model:value="{{ area }}" label="地區(qū)選擇" placeholder="請選擇地區(qū)" clearable readonly is-link data-popups="showArea" bind:click-input="show_popup" />

<!-- 省市區(qū) -->
<van-popup show="{{ showArea }}" position="bottom" round data-popups="showArea" bind:close="hide_popup">
    <van-picker columns="{{ addrs }}" show-toolbar title="地區(qū)選擇" 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
                })
            }
        })
    },


// 省市區(qū)變動
    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);
        }
    },

    // 確認(rèn)選擇省市區(qū)
    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, // 區(qū)縣
            province_adcode: value[0].adcode,
            city_adcode: value[1].adcode,
            district_adcode: value[2].adcode,
            area: addr_value,
            showArea: false,
        })
    },

2.3、效果

?

三、 注意事項

在開發(fā)者工具上預(yù)覽和使用會明顯感覺到滑動，點擊卡頓，但在真機，手機預(yù)覽的時候不會出現(xiàn)卡頓問題，體驗感不錯，發(fā)布了之后用正式版測目前也沒有發(fā)現(xiàn)問題文章來源地址http://www.zghlxwxcb.cn/news/detail-660283.html

到了這里，關(guān)于小程序-基于vant的Picker組件實現(xiàn)省市區(qū)選擇的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！