评论

微信小程序省市区三级联动(自定义数据版)可扩展为二级联动

自定义数据版本省市区三级联动,可自行扩展

刚有老哥问为啥iPhone 11 不支持省市区三级联动,然后让老哥提供了个代码片段。我用iPhone X看了下 也跑不起来啊。看了下代码逻辑,只有一个省,只写了一个picker-view-column,这搞个啥三级联动。。。然后老哥说了是抠了一部分代码出来的。既然有问题,那我们还是那句话,有需求,然后能搞出来的,咱就花点时间去搞。

然后给老哥实现了该功能,社区可能有其他的方案了,但是再分享下吧,给有需要的童鞋。

效果图:

额,这个视频转GIF因为社区上传不了大图,所以剪了一部分,具体的效果还是直接工具打开代码片段预览吧~

上代码

wxml:

<view class="address-item" bindtap="pickAddress">
  <view class="item-title">所在地区</view>
  <view class="item-content arrow {{region ? '' : 'item-content_shadow'  }}">{{region||"请选择"}}</view>
</view>
<pop-up visible="{{visible}}" onClose="closePopUp">
  <view slot="content">
    <view class="picker-view">
      <view class="picker-view__pane">
        <text catchtap="cityCancel">取消</text>
        <text catchtap="citySure">确定</text>
      </view>
      <picker-view class="pick-view__group" bindchange="cityChange" value="{{value}}" wx:key="*this">
        <picker-view-column indicator-class="item_active">
          <view wx:for="{{provinces}}" class="picker-item" wx:key="idnex">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{citys}}" class="picker-item" wx:key="">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{areas}}" class="picker-item" wx:key="">{{item.name}}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</pop-up>

这里有封装一个自定义组件pop-up,是从下往上弹出的的一个效果,已放到代码片段里了,自行查看即可~

接下来是wxss

.address-item {
  min-height: 98rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #f1f1f1;
}

.item-title {
  width: 203rpx;
  color: #4d4c4c;
  font-size: 28rpx;
  height: 98rpx;
  line-height: 98rpx;
}
.item-content {
  width: 520rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 28rpx;
  height: 98rpx;
  line-height: 98rpx;
  color: #4d4c4c;
}
/* 地区级联选择器 */

.picker-view {
  width: 100%;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 0rpx;
  left: 0rpx;
}

.picker-item {
  line-height: 70rpx;
  margin-left: 5rpx;
  margin-right: 5rpx;
  text-align: center;
}

.picker-view__pane {
  height: 100rpx;
  width: 100%;
  padding: 20rpx 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.picker-view__pane text{
  color: red;
  font-size: 30rpx;
}

.pick-view__group {
  width: 96%;
  height: 450rpx;
}

呐,接下来还是重点的js处理。

首先我在本地定义了一个city.js,网上下载的。主要是省市区的数据

var provinces = [{
  "name": "北京市",
  "id": "110000"
}, {
  "name": "天津市",
  "id": "120000"
}, {
  "name": "河北省",
  "id": "130000"
}, {
  "name": "山西省",
  "id": "140000"
}, {
  "name": "内蒙古自治区",
  "id": "150000"
}, {
  "name": "辽宁省",
  "id": "210000"
}]

就不放太多了,具体的可以在代码片段里查看,大家可以自定义数据的id,贴合自己的业务场景。

然后是页面js处理

var app = getApp()
var address = require('./city.js')

var app = getApp()
Page({
  data: {
    value: [0, 0, 0], // 地址选择器省市区 暂存 currentIndex
    region: '', //所在地区
    regionValue: [0, 0, 0], // 地址选择器省市区 最终 currentIndex
    provinces: [], // 一级地址
    citys: [], // 二级地址
    areas: [], // 三级地址
    visible: false
  },
  onLoad(options) {
    // 默认联动显示北京
    var id = address.provinces[0].id 
    this.setData({
      provinces: address.provinces, // 34省
      citys: address.citys[id], //默认北京市辖区
      areas: address.areas[address.citys[id][0].id]
    })
  },
  closePopUp() {
    this.setData({
      visible: false
    })
  },
  pickAddress() {
    this.setData({
      visible: true,
      value: [...this.data.regionValue]
    })
  },
  // 处理省市县联动逻辑 并保存 value
  cityChange(e) {
    var value = e.detail.value
    let {
      provinces,
      citys
    } = this.data
    var provinceNum = value[0]
    var cityNum = value[1]
    var areaNum = value[2]

    if (this.data.value[0] !== provinceNum) {
      var id = provinces[provinceNum].id
      this.setData({
        value: [provinceNum, 0, 0],
        citys: address.citys[id],
        areas: address.areas[address.citys[id][0].id]
      })
    } else if (this.data.value[1] !== cityNum) {
      var id = citys[cityNum].id
      this.setData({
        value: [provinceNum, cityNum, 0],
        areas: address.areas[citys[cityNum].id]
      })
    } else {
      this.setData({
        value: [provinceNum, cityNum, areaNum]
      })
    }
  },
  preventTouchmove() {},
  // 城市选择器
  // 点击地区选择取消按钮
  cityCancel(e) {
    this.setData({
      citys: this.data.lastCitys,
      areas: this.data.lastAreas,
      value: [...this.data.regionValue],
      visible: false
    })
  },
  // 提交时由序号获取省市区id
  getRegionId(type) {
    let value = this.data.regionValue
    let provinceId = address.provinces[value[0]].id
    let townId = address.citys[provinceId][value[1]].id
    let areaId = ''
    if (address.areas[townId][value[2]].id) {
      areaId = address.areas[townId][value[2]].id
    } else {
      areaId = 0
    }

    if (type === 'provinceId') {
      return provinceId
    } else if (type === 'townId') {
      return townId
    } else {
      return areaId
    }
  },
  // 点击地区选择确定按钮
  citySure(e) {
    var value = this.data.value
    this.setData({
      visible: false
    })
    // 将选择的城市信息显示到输入框
    try {
      var region = (this.data.provinces[value[0]].name || '') + (this.data.citys[value[1]].name || '')
      if (this.data.areas.length > 0) {
        region = region + this.data.areas[value[2]].name || ''
      } else {
        this.data.value[2] = 0
      }
    } catch (error) {
      console.log('adress select something error')
    }

    this.setData({
      region: region,
      lastCitys: this.data.citys,
      lastAreas: this.data.areas,
      regionValue: [...this.data.value]
    }, () => {
      console.log(`省份ID:${this.getRegionId('provinceId')}: 市区ID:${this.getRegionId('townId')}:城区ID:${this.getRegionId('areas')}`)
    })
  }
})

以上就是一个自定义数据版本的省市区三级联动啦,老规矩,结尾放代码片段,大家可自行修改代码扩展,可改为二级联动等。

https://developers.weixin.qq.com/s/nktLVrmc7Ver

最后一次编辑于  星期五 15:00  
点赞 20
收藏
评论

4 个评论

  • 没有然后
    没有然后
    2天前

    [{

    "code": "129"

    "name": "北京市"

    "children": [{

    "code": "8285"

    "countyList": null

    }]

    }, {

    "code": "130"

    "name": "天津市"

    "children": [{

    "code": "7926"

    "name": "天津市"

    }]

    }]

    有时候哦我们的省市区格式是这样的,这种咋用啊



    2天前
    赞同
    回复 1
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      1天前
      格式都可自定义的。只是前端获取的方式需要改下。
      1天前
      回复
  • @陳
    @陳
    星期五 10:22

    picker滚动到别的省份,然后点击取消,再显示的话会出错

    星期五 10:22
    赞同
    回复 1
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      星期五 15:01
      问题已修复,感谢反馈
      星期五 15:01
      回复
  • 假装在上海
    假装在上海
    01-06

    console.log('adress select something error')


    这个address拼写错了 大佬

    01-06
    赞同
    回复 1
  • 小肥羊
    小肥羊
    2019-12-20

    习惯了,见到大佬的文章,不由自主会先赞后收藏

    2019-12-20
    赞同
    回复
登录 后发表内容