微信小程序 基于Vant Weapp UI 组件库的Area 省市区选择

Area 省市区选择,省市区选择组件通常与 弹出层 组件配合使用。

areaList 格式

areaList 为对象结构,包含 province_listcity_listcounty_list 三个 key。

每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11,以 0 补足 6 位,为 110000

Vant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入。我的是node.js

复制代码
npm i @vant/area-data

安装后,打开node_modules将会看到,按官方的是无法成功引用的

我们新建一个用来引入文件的文件夹node_File(名字可以自己定),把@vant中的 area-data 整个进行拷贝,把dist里面的index.cjs.js文件名改为data.js

我的放在了pages下面,引入链接

java 复制代码
import {
    areaList
  } from "../../pages/node_File/area-data/dist/data";
  

因为我好几个地方需要用到,所以直接封装为组件使用

addressOption.wxml

html 复制代码
<van-field value="{{ fieldValue }}" readonly clearable input-align="right" label="地区" placeholder="请选择地区" bind:tap="onClick" required is-link />
<van-action-sheet show="{{ show }}">
    <van-area area-list="{{ areaList }}" title="地区选择" bind:confirm="onConfirm" bind:cancel="onClose" />
</van-action-sheet>

addressOption.js

javascript 复制代码
// components/addressOption/addressOption.js
//省市区数据引入使用
import {
    areaList
  } from "../../pages/node_File/area-data/dist/data";
  
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        optionValue: {
            type: String,
            value: ""
        },
        mustfFillIn: {
            type: String,
            value: false
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        areaList,
        show:false
    },

    /**
     * 组件的方法列表
     */
    methods: {
        onClick() {
            this.setData({
                show: true,
            });
        },

        onConfirm(e){
            console.log("确定省市区:",e)
            var address=""
            e.detail.values.forEach(element => {
                address=address+element.name
            });
            this.setData({
                address: address,
                show: false,
            })
            this.handleTap()
            console.log("省市区为:",address)
            
        },

        handleTap() {
            let value = this.data.address
            console.log("fieldValue 地址:", value)
            this.triggerEvent("addressTab", value)
        },

        onClose() {
            this.setData({
                show: false,
            });
        },

    },
    observers: {
        optionValue: function (e) {
            this.setData({
                fieldValue: e
            })
        }
    },
})

页面使用省市区

引入组件 addressEedit.json

javascript 复制代码
{
    "usingComponents": {
        "address-option":"/components/addressOption/addressOption"
    }
}

addressEedit.wxss

javascript 复制代码
<view>
    <van-cell-group>
        <van-field model:value="{{ addressee }}" maxlength="8" clearable input-align="right" label="收件人" placeholder="请填写收件人" required is-link />
        <van-field model:value="{{ phone_number }}" maxlength="11" type="number" clearable input-align="right" label="手机号" placeholder="请填写手机号" required is-link />
        <address-option mustfFillIn="true" optionValue="{{delivery_address}}" bind:addressTab="onAddress"></address-option>
        <van-field model:value="{{ detailed_address }}" maxlength="10" clearable input-align="right" label="详细地址" placeholder="小区门牌号 例如 10栋101室" required is-link />
    </van-cell-group>

    <van-goods-action>
        <van-goods-action-button color="#fde753" text="保存地址" />
    </van-goods-action>
</view>

addressEedit.js

javascript 复制代码
Page({

    /**
     * 页面的初始数据
     */
    data: {
        show:false,
        delivery_address:"",
        addressee:"",
        phone_number:"",
        detailed_address:""
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    onAddress(e){
        this.setData({
            delivery_address:e.detail
        })

    },

})

组件addressOption无法找到,在app.json引入组件

javascript 复制代码
"pages": [
        "components/addressOption/addressOption"
    ],

使用效果

相关推荐
流口水的兔子4 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记4 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481215 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero7 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠8 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu19 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun1 天前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序