微信小程序的定义省市区联动组件

作者：https://www.jianshu.com/p/58ebcbaf2906

最终效果

image

思维导图

image

自定义region-picker组件

region-picker.js文件

const addressRequest = require('../../../http/address.js')
const utils = require('../../../utils/utils')
Component({
  lifetimes: {
    attached: function () {
      if(this.properties.regionValue.length == 0){
        this.getChildArea(2, "1")
      }
    },
   
  },
  properties: {
    showRegion: {
      type: Boolean,
      observer: function(newVal, oldVal) {
        this.setData({
          dialog: newVal,
        });
      },
    },
    regionValue: {
      type: Array,
      value: [],
      observer: function(newVal, oldVal) {
        if (newVal.length > 0) {
          let select = -1;
          for (let i = newVal.length - 1; i >= 0; i--) {
            if (newVal[i].id !== '') {
              select = i;
              break;
            }
          }
          // 除最低级别区（select = 2）以外，需要获取当前级别下一级的数据
          this.setData({
            ['region.tabs']: newVal,
            ['region.select']: select < 2 ? select+1 : select,
          });
          if(this.data.region.select == 0){
            this.getChildArea(2, "1")
          }else if(this.data.region.select == 1){
            this.getChildArea(3, this.data.region.tabs[this.data.region.select-1].id)
          }else if(this.data.region.select == 2){
            this.getChildArea(4, this.data.region.tabs[this.data.region.select-1].id)
          }
        }
      },
    },
  },
  data: {
    dialog: false,
    area: [],
    region: {
      tabs: [
        {
          name: '请选择',
          id: '',
        },
        {
          name: '请选择',
          id: '',
        },
        {
          name: '请选择',
          id: '',
        },
      ],
      select: 0,
    },
  },
  methods: {
    // 关闭 picker 触发的方法
    emitHideRegion: function() {
      if (this.data.region.tabs[2].id === '') {
        wx.showToast({
          title: '请选择地址',
          icon: 'none',
          duration: 2000,
        });
        return false;
      }
      let myEventDetail = {}; // detail对象，提供给事件监听函数
      // let myEventOption = {}; // 触发事件的选项
      this.setData({
        dialog: !this.data.dialog,
      });
      myEventDetail = {
        showRegion: this.data.dialog,
        regionValue: this.data.region.tabs,
      };
      this.triggerEvent('myevent', myEventDetail);
    },
    bindRegionChange: function(e) {
      // 获取当前选中项的name和id并赋值给data中的数据
      let id ='region.tabs[' + this.data.region.select + '].id';
      let name ='region.tabs[' + this.data.region.select + '].name';
      this.setData({
        [id]: e.target.dataset.id,
        [name]: e.target.dataset.name,
      });
      // 除了三级以外的需要获取对应子选项
      if (this.data.region.select < 2) {
        this.setData({
          ['region.select']: ++this.data.region.select,
        });
        // 获取子选项
        
        if(this.data.region.select == 0){
          this.getChildArea(2, "1")
        }else if(this.data.region.select == 1){
          this.getChildArea(3, this.data.region.tabs[this.data.region.select-1].id)
        }else if(this.data.region.select == 2){
          this.getChildArea(4, this.data.region.tabs[this.data.region.select-1].id)
        }
      } else {
        // 三级选项选择完毕关闭省市区选择器
        this.emitHideRegion();
      }
    },
    getChildArea: function(type, id) {
      //请求数据（你也可以在本地定义一个json文件或者地址信息，这里是对地址数据的操作）
      this.setData({
        area: []
      })
      addressRequest.getPca({fatherRegionCode: id, regionType: type}, (data)=>{
        wx.hideLoading();
        if (data.code != 200) {
          utils.showToast(data.msg, "loading", 1000);
          return;
        }
        this.setData({
          area: data.data
        })
      })
    },
    // 省市区tab切换
    changeRegionLevel: function(e) {
      let level = e.target.dataset.level;
      // 三级选项的tab点击无效果
      if (level === 2) return false;
      // 当前选中tab和级别小于当前选中tab的状态都置为初始化状态
      for (let i = level; i < 3; i++) {
        let string = 'region.tabs['+ i +']';
        this.setData({
          [string]: {
            name: '请选择',
            id: '',
          },
        });
      }
      this.setData({
        ['region.select']: level,
      });
      if(this.data.region.select == 0){
        this.getChildArea(2, "1")
      }else if(this.data.region.select == 1){
        this.getChildArea(3, this.data.region.tabs[this.data.region.select-1].id)
      }else if(this.data.region.select == 2){
        this.getChildArea(4, this.data.region.tabs[this.data.region.select-1].id)
      }
    },
  },
});

region-picker.wxml文件

<!--pages/components/qca/qca.wxml-->
<view class="free-dialog {{dialog ? 'free-dialog--show' : ''}}">
  <view class="free-dialog__mask" bindtap="emitHideRegion"></view>
  <view class="free-dialog__container">
      <view class="free-dialog__container__header">
          <view>选择所在地区</view>
          
      </view>
      <view class="free-dialog__container__content">
          <view class="free-content {{isIphoneX ? 'ipx' : ''}}">
              <view class="free-content__tabs">
                  <view
                      class="free-content__tabs__tab {{region.select === index ? 'select' : ''}}"
                      wx:for="{{region.tabs}}"
                      wx:key="id"
                      wx:if="{{index <= region.select}}"
                      data-level="{{index}}"
                      bindtap="changeRegionLevel">
                      {{item.name}}
                  </view>
              </view>
              <scroll-view scroll-y class="free-content__scroll">
                  <view
                      class="free-content__scroll__item"
                      wx:for="{{area}}"
                      wx:key="id"
                      data-id="{{item.regionCode}}"
                      data-name="{{item.regionName}}"
                      bindtap="bindRegionChange">
                      {{item.regionName}}
                  </view>
              </scroll-view>
          </view>
      </view>
  </view>
</view>

region-picker.wxss文件

/* pages/components/qca/qca.wxss */
.free-dialog__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
.free-dialog__container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #F1F1F1;
  transform: translateY(150%);
  transition: all 0.4s ease;
  z-index: 11;
}
.free-dialog--show .free-dialog__container {
  transform: translateY(0);
}
.free-dialog--show .free-dialog__mask {
  display: block;
}
.free-dialog__container__header {
  padding: 24rpx 30rpx;
  text-align: center;
  background: white;
}
.free-dialog__container__header .close {
  position:absolute;
  right:30rpx;
  top:31rpx;
  width:36rpx;
  height:36rpx;
}
.free-content {
  background: white;
  border-bottom: 40rpx solid white;
}
.free-content.ipx {
  border-bottom: 72rpx solid white;
}
.free-content__tabs__tab {
  display: inline-block;
  padding: 12rpx 46rpx;
  font-size: 32rpx;
  color: #333;
  border-bottom: 4rpx solid white;
}
.free-content__tabs__tab.select {
  border-color: #2E4AE7;
}
.free-content__scroll {
  padding: 0 40rpx;
  height: 480rpx;
  box-sizing: border-box;
}
.free-content__scroll__item {
  margin-top: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #333;
}

使用

使用组件页面的 WXML文件

<view class="cu-form-group" style="padding: 0rpx">
  <view class="title">地址选择</view>
  <view bindtap="chooseRegion" wx:if="{{!regionValue[0].id}}" style="color: #999999;">请选择地址 <image class="address-image" src="../images/stock/arrows.png"></image> </view>
    <view bindtap="chooseRegion" wx:else style="margin-right: 10rpx;">
        <text wx:if="{{regionValue[0].id}}">{{regionValue[0].name}}</text>
        <text wx:if="{{regionValue[1].id}}">{{regionValue[1].name}}</text>
        <text wx:if="{{regionValue[2].id}}">{{regionValue[2].name}}</text>
        <image class="address-image" src="../images/publicImg/guidance.png"></image>
    </view>
</view>
<region-picker
  region-value="{{regionValue}}"
  show-region="{{showRegion}}"
  bind:myevent="emitHideRegion">
</region-picker>

使用组件页面的 js文件

Page({
  data: {
    regionValue: [],
    showRegion: false,
  },
  chooseRegion: function() {
    this.setData({
      showRegion: true,
    });
  },
  emitHideRegion: function(e) {
    this.setData({
      showRegion: e.detail.showRegion,
      regionValue: e.detail.regionValue,
    });
  },
});

使用组件页面的 json文件

{
  "usingComponents": {
    "region-picker": "region-picker组件的路径"
  }
}