小程序之——五级联动日期选择器

1、需求是：

 五级地区：省-----市/自治州-----区/县-----街道办事处/镇-----居委会/村委会

 

2、接口给的数据结构是（模拟的）：

 　　　　　　------根据每一级的code得到下一级的数据

----data.js

let areaData = {
  // “省”
  area_province: [{
    shortName: '云南省',
    code: '1',
  }, {
    shortName: '四川省',
    code: '2',
  }, {
    shortName: '贵州省',
    code: '3',
  }, {
    shortName: '广州省',
    code: '4',
  }, {
    shortName: '北京市',
    code: '5',
  }, {
    shortName: '天津市',
    code: '6',
  }],
  // 根据省份code得到----“市”----举例云南省的
  area_city: [{
    shortName: '昆明市',
    code: '10'
  }, {
    shortName: '曲靖市',
    code: '11'
  }, {
    shortName: '丽江市',
    code: '12'
  }, {
    shortName: '大理白族自治州',
    code: '13'
  }],
  // 根据市code得到----“区”----举例曲靖市的
  area_district: [{
    shortName: '沾益区',
    code: '110'
  }, {
    shortName: '陆良县',
    code: '111'
  }, {
    shortName: '罗平县',
    code: '112'
  }, {
    shortName: '富源县',
    code: '113'
  }],
  // 根据区code得到----“街道办事处”----举例沾益区的
  area_streetOffice: [{
    shortName: '西平街道办事处',
    code: '1100'
  }, {
    shortName: '龙华街道办事处',
    code: '1101'
  }, {
    shortName: '金龙街道办事处',
    code: '1102'
  }, {
    shortName: '白水镇',
    code: '1103'
  }],
  // 根据街道办事处code得到----“居委会”----白水镇举例的
  area_neighborhoodCommittee: [{
    shortName: '白水社区居民委员会',
    code: '11030'
  }, {
    shortName: '小塘社区居民委员会',
    code: '11031'
  }, {
    shortName: '马场村民委员会',
    code: '11032'
  }, {
    shortName: '大德村民委员会',
    code: '11033'
  }]
}
export {
  areaData
}

3、实现：

js----

// pages/areaselect/areaselect.js
var areaData = require('data.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    area: [], //地址数据
    level_now: 0, //当前的level----全局标记
    tabs: [{
        shortName: '请选择',
        code: '',
        level: 0
      },
      {
        shortName: '请选择',
        code: '',
        level: 1
      },
      {
        shortName: '请选择',
        code: '',
        level: 2
      },
      {
        shortName: '请选择',
        code: '',
        level: 3
      },
      {
        shortName: '请选择',
        code: '',
        level: 4
      }
    ],
    showDialog: false //是否展示地址选择弹出框
  },
  // 点击关闭按钮
  chooseRegion() {
    this.setData({
      showDialog: true
    })
  },
  //点击空白处，关闭选择框
  closeLayer() {
    this.setData({
      showDialog: false
    })
  },
  //点击tab
  changeTab(e) {
    // 改变全局level
    this.setData({
      level_now: e.target.dataset.level
    });
    // 第5级选项的tab点击无效果
    if (e.target.dataset.level === 4) return false;
    //把当前tab选项改为“请选择”
    let string = 'tabs[' + e.target.dataset.level + ']';
    this.setData({
      [string]: {
        shortName: '请选择'
      }
    })
    // 得到上一级code对应数据
    if (e.target.dataset.level == 0) {
      this.getData('')
    } else {
      this.getData(this.data.tabs[e.target.dataset.level - 1].code)
    }
  },
  //点击选择具体地址项
  pickAreaItem(e) {
    //改变tab项的数据
    let code = 'tabs[' + (this.data.level_now) + '].code';
    let shortName = 'tabs[' + (this.data.level_now) + '].shortName';
    let level = 'tabs[' + (this.data.level_now) + '].level';
    this.setData({
      [code]: e.target.dataset.code, //标签上绑定的code值
      [shortName]: e.target.dataset.shortname, //标签上绑定的shortname值
      [level]: this.data.level_now //当前级别
    });
    if (this.data.level_now < 4) {
      //还没到最后一级
      this.setData({
        level_now: ++this.data.level_now //改变tab展示级别
      });
      //获取当前点击项对应的数据
      this.getData(e.target.dataset.code)
    } else {
      //选完最后一级，500ms关闭弹框
      setTimeout(() => {
        this.setData({
          showDialog: false
        })
      }, 500)
    }
  },
  // 模拟获取接口函数
  getData(code) {
    switch (code) {
      case '':
        // 不传参数，得到所有省份信息
        this.setData({
          area: areaData.areaData.area_province
        })
        break;
      case '1':
        // code为1，得到云南省---“市”
        this.setData({
          area: areaData.areaData.area_city
        })
        break;
      case '11':
        // code为11，得到云南省曲靖市---“区”
        this.setData({
          area: areaData.areaData.area_district
        })
        break;
      case '110':
        // code为110，得到云南省曲靖市沾益区---“街道办事处”
        this.setData({
          area: areaData.areaData.area_streetOffice
        })
        break;
      case '1103':
        // code为1103，得到云南省曲靖市沾益区白水镇---“居委会”
        this.setData({
          area: areaData.areaData.area_neighborhoodCommittee
        })
        break;
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getData('') //页面初始化，得到所有省份数据
  }
})

wxml-----

<!--pages/areaselect/areaselect.wxml-->
<view class="page">
  <view class="container">
    <view class="address-pick-box" bindtap="chooseRegion">
      <view class="pick-left">请选择:</view>
      <view class="pick-center">
        <text wx:if="{{tabs[0].level<=level_now}}">{{tabs[0].shortName}}-</text>
        <text wx:if="{{tabs[1].level<=level_now}}">{{tabs[1].shortName}}-</text>
        <text wx:if="{{tabs[2].level<=level_now}}">{{tabs[2].shortName}}-</text>
        <text wx:if="{{tabs[3].level<=level_now}}">{{tabs[3].shortName}}-</text>
        <text wx:if="{{tabs[4].level<=level_now}}">{{tabs[4].shortName}}</text>
      </view>
      <view class="pick-right">></view>
    </view>
  </view>
  <!-- 弹框 -->
  <view class="dialog-box-layer" wx:if="{{showDialog}}">
    <view class="dialog-box-layer" bindtap="closeLayer"></view>
    <view class="dialog-box">
      <view class="dialog-box-title">
        <text class="dialog-title-text">请选择地址</text>
        <text class="dialog-title-close" catchtap="closeLayer">关闭</text>
      </view>
      <view class="dialog-box-con">
        <!-- 头部tab栏 -->
        <view class="dialog_tabs">
          <view class="dialog_tabs_item {{level_now === index ? 'tab_active' : ''}}" wx:for="{{tabs}}" wx:key="index"
            wx:if="{{index <= level_now}}" bindtap="changeTab" data-code="{{item.code}}" data-level="{{item.level}}">
            {{item.shortName}}
          </view>
        </view>
        <!-- 底部滚动栏 -->
        <scroll-view scroll-y class="dialog_scroll">
          <view class="dialog_scroll_item" wx:for="{{area}}" wx:key="index" bindtap="pickAreaItem"
            data-code="{{item.code}}" data-shortname="{{item.shortName}}">{{item.shortName}}
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</view>

wxss-----

/* pages/areaselect/areaselect.wxss */
.address-pick-box {
  display: flex;
  box-sizing: border-box;
  padding: 20rpx;
  height: 100rpx;
  font-size: 30rpx;
}

.pick-left,
.pick-center,
.pick-right {
  height: 100%;
  display: flex;
  align-items: center;
}

.pick-center {
  flex: 1;
  margin: 0 15rpx;
  background: rgba(93, 93, 93, 0.6);
  padding: 2rpx 8rpx;
  font-size: 24rpx;
}

.dialog-box-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.2);
}

.dialog-box {
  position: absolute;
  width: 100%;
  height: 40%;
  bottom: 0;
  right: 0;
  background: white;
  box-sizing: border-box;
  padding: 20rpx;
}

.dialog-box-title {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
}

.dialog-title-text {
  flex: 1;
  text-align: center;
}

.dialog-title-close {
  font-size: 22rpx;
  color: rgb(255, 102, 0);
}

.dialog_tabs {
  display: flex;
  flex-wrap: wrap;
  height: 20%;
}

.dialog_tabs_item {
  font-size: 30rpx;
  padding: 0 10rpx;
  display: flex;
  align-items: center;
}

.tab_active {
  border-bottom: #FA263C solid 2rpx;
}

.dialog_scroll {
  padding: 10rpx;
  box-sizing: border-box;
  box-shadow: 0.5rpx 0 20rpx rgba(253, 253, 253, 0.562) inset;
  height: 80%;
}

.dialog_scroll_item {
  font-size: 28rpx;
  padding-bottom: 30rpx;
  color: #666;
}

.dialog-box-con {
  height: 80%;
}