微信小程序组件简易实现省市区三级联动

古城微笑少年丶 2024-04-08 08:16 59阅读 0赞

直接使用微信官方文档中的picker来开发省市区三[级联][Link 1]动 [picker][]

#### 运行效果图 ####

![在这里插入图片描述][b961667183f44cda8dd5fcdd8befa8b9.png_pic_center]

模拟数据：选择确定地址后回填效果  
![在这里插入图片描述][b521ad1a9a9f4daea9cae5e5cae8c57a.png_pic_center]

#### vue 代码 ####

> wxml 部分

<view>
      <picker mode="region" bindchange="bindRegionChange" value="{
        {region}}">
        <text wx:if="{
        {region==''}}">请选择省市区</text>
        <text wx:if="{
        {region!=''}}">{
        {
        region[0]}}、{
        {
        region[1]}}、{
        {
        region[2]}}</text>
      </picker>
    </view>

> js 部分

Page({
        
      data: {
        
        region: [], // 选中的数据
      },
    
      onLoad: function (options) {
        
        //模拟数据：选择确定地址后回填效果。数据str 可以从后台中获取
        var str = "北京市,北京市,海淀区";
        var splitAdd = str.split(",");
        console.log(splitAdd)
        this.setData({
        
          region: splitAdd
        })
      },
      //点击确定按钮
      bindRegionChange: function (e) {
        
        console.log(e.detail.value)
        console.log(e.detail.code)
        this.setData({
        
          region: e.detail.value
        })
      }
    })

--------------------

![在这里插入图片描述][0e8c65f453e645c7bb07070a60753c84.jpeg_pic_center]

> 各位看官》创作不易，点个赞！！！  
> 诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

--------------------

[实战模式-Vue+Java后台实现省市区三级联动][-Vue_Java]  
[实战模式-微信小程序java后台+mysql实现省市区三级联动][-_java_mysql]  
[爬虫java模式-拉取省市区数据][java_-]

[Link 1]: https://so.csdn.net/so/search?q=%E7%BA%A7%E8%81%94&spm=1001.2101.3001.7020
[picker]: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
[b961667183f44cda8dd5fcdd8befa8b9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1ad5526b424646bb88d149346aae7e5a.png
[b521ad1a9a9f4daea9cae5e5cae8c57a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2776309dd240487ca95cae9f3fbfc8af.png
[0e8c65f453e645c7bb07070a60753c84.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b9fce504f945423ba7095e5126d442f2.jpeg
[-Vue_Java]: https://blog.csdn.net/SoulNone/article/details/126317092
[-_java_mysql]: https://blog.csdn.net/SoulNone/article/details/126317291
[java_-]: https://blog.csdn.net/SoulNone/article/details/126317591