微信小程序省市县三级联动选择的实现

最新推荐文章于 2024-08-28 09:33:24 发布

那时雨浸湿巴黎

最新推荐文章于 2024-08-28 09:33:24 发布

阅读量1.6k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/yxmwjy/article/details/103735619

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

微信小程序省市县三级联动选择的实现
wxml 代码

<view class="area_section">
        <view class="section__title">选择地址</view>
        <picker mode="region" bindchange="bindRegionChange" value="{{detailed}}" custom-item="{{customItem}}"
      name="detailed" class="picker_box" >
          <view class="picker {{clas}}" >{{detailed}} <image src="../../image/down.png" style="width:11.5pt;height:10pt;"></image></view>
        </picker>
      </view>

wxss代码

.area_section{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background:#fff;
  /* border-bottom:1px solid #D9D9D9; */
  font-size: 26rpx;
}
.section__title{
  flex: 1;
  font-size: 26rpx;
}
.picker_box{
  flex: 3;
  padding: 8px 0;
  border-bottom: 1px solid #f2f2f2;
  color:#7c7c7c;
  width:100%;
  letter-spacing:2rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

js代码

var calls = require("../../utils/area.js")//引入省市县的js代码

 data: {

    customItem: [],
    detailed: '请选择',
  },

  onLoad: function (options) {
  },

  //省市联动
  bindRegionChange: function (e) {
    var that = this
    //为了让选择框有个默认值，    
    that.setData({
      clas: ''
    })　　　//下拉框所选择的值
    console.log('picker发送选择改变，携带值为', e.detail.value)

    this.setData({
      //拼的字符串传后台
      detailed: e.detail.value[0] + " " + e.detail.value[1] + " " + e.detail.value[2],
      //下拉框选中的值
      region: e.detail.value
    })

    this.setData({
      "AddSite.area": e.detail.value[0] + " " + e.detail.value[1] + " " + e.detail.value[2]
    })
    console.log(this.data.AddSite)
  },

**注释：**area.js的数据在百度上搜索全国省市县json数据，下载一个json数据的文件，下载成功后把文件复制粘贴到项目的utils文件夹下，并且把文件后缀名变为js。