微信小程序 自定义三级联动

自定义三级联动。无论三级，二级，一级基本异曲同工。
微信给我们提供了picker组件,但是限制也非常多。只能从底部弹出，省市区数据不可更改等一系列问题。
所以我们自己去做一个三级联动，微信也提供了组件picker-view来帮助我们实现

废话不多说。看效果和代码

region.png

index.wxml

<view class="index">
  <view class="input" bindtap="getbox" wx:if="{{!inputShow}}" style="color: #999;">请选择地址</view>
  <view class="input" bindtap="getbox" wx:if="{{inputShow}}">{{province}} {{city}} {{area}}</view>
  <!-- 省市区弹框 -->
  <view class="box" wx:if="{{boxShow}}">
    <!-- 阴影 -->
    <view class="black" bindtap="hidebox"></view>
    <!-- 内容 -->
    <view class="nr">
      <view class="item">
        <text bindtap="hidebox">取消</text>
        <text bindtap="confirm">确认</text>
      </view>
      <view style="display:flex;width: 100%;height: 400rpx;">
          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{pIndex}}" bindchange="changeProvince2">
              <picker-view-column>
                  <view wx:for="{{placeArray}}" wx:key="name" style="line-height: 50rpx">{{item.name}}</view>
              </picker-view-column>
          </picker-view>
          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{cIndex}}" bindchange="changeCity2">
              <picker-view-column>
                  <view wx:for="{{placeArray[pIndex].city}}" wx:key="name" style="line-height: 50rpx">{{item.name}}</view>
              </picker-view-column>
          </picker-view>
          <picker-view indicator-style="height: 200rpx;" style="width: 100%;height: 400rpx;text-align: center" value="{{aIndex}}" bindchange="changeArea2">
              <picker-view-column>
                  <view wx:for="{{placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 50rpx">{{item}}</view>
              </picker-view-column>
          </picker-view>
      </view>
    </view>
  </view>
</view>

index.css

.index{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  padding-top: 30rpx;
  box-sizing: border-box;
}
.input{
  width: 680rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1px solid #999;
  border-radius: 10rpx;
  margin: auto;
  padding: 0 32rpx;
  box-sizing: border-box;
}
.box{
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  z-index: 8;
}
.black{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  z-index: 10;
}
.nr{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500rpx;
  z-index: 12;
  background: #FFF;
}
.item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-bottom: 1px solid #EEE;
}

index.js

取部分省市区数据，默认了北京-北京-东城区。如需要可修改

// 部分省市区数据
const placeArray = [
  {
    "name": "北京",
    "city": [{
      "name": "北京",
      "area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"]
    }]
  },

  {
    "name": "天津",
    "city": [
      {
        "name": "天津A",
        "area": ["a区", "b区", "c区", "d区", "e区"]
      },
      {
        "name": "天津B",
        "area": ["1区", "2区", "3区", "4区"]
      }
   ]
  },

  {
    "name": "河北",
    "city": [

      {
        "name": "石家庄",
        "area": ["长安区", "新乐市", "鹿泉市"]
      },

      {
        "name": "邯郸",
        "area": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉  县", "磁  县" ]
      },

      {
        "name": "邢台",
        "area": ["桥东区", "桥西区", "沙河市"]
      },
    ]
  }];

Page({
  data:{
    inputShow:false,
    boxShow:false,
    placeArray: placeArray,
    province: placeArray[0].name,
    pIndex: 0,
    city: placeArray[0].city[0].name,
    cIndex: 0,
    area: placeArray[0].city[0].area[0],
    aIndex: 0
  },
  // 展示弹框
  getbox: function(){
    this.setData({
      boxShow: true
    })
  },
  // 隐藏弹框
  hidebox: function(){
    this.setData({
      boxShow: false
    })
  },
  // 确认按钮
  confirm: function(){
    this.setData({
      boxShow: false,
      inputShow: true,
    })
  },
 changeProvince2: function(e){
  const val = e.detail.value
  this.setData({
    pIndex: val,
    cIndex: 0,
    aIndex: 0,
    province: placeArray[val].name,
    city: placeArray[val].city[0].name,
    area: placeArray[val].city[0].area[0]
  })
},
changeCity2: function(e){
  const val = e.detail.value
  this.setData({
    cIndex: val,
    aIndex: 0,
    city: placeArray[this.data.pIndex].city[val].name,
    area: placeArray[this.data.pIndex].city[val].area[0]
  })
},
changeArea2: function(e){
  const val = e.detail.value
  this.setData({
    aIndex: val,
    area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
  })
},
})