24:全国省市县下拉列表

modelTest.wxml：

<!--modelTest.wxml-->
<import src="../../model/model.wxml"/>
<view class="infoText">{{province}} {{city}} {{county}}</view>
<button class="animation-button" bindtap="translate">选择城市</button>
<template is="areaData" data="{{...item}}"/>

modelTest.js：

// modelTest.js
var model = require('../../model/model.js')

var show = false;
var item = {};

Page({
  data: {
    item: {
      show: show
    }
  },
   //生命周期函数--监听页面初次渲染完成
  onReady: function (e) {
    var that = this;
    //请求数据
    model.updateAreaData(that, 0, e);
  },
  //点击选择城市按钮显示picker-view
  translate: function (e) {
    model.animationEvents(this, 0, true,400);  
  },
  //隐藏picker-view
  hiddenFloatView: function (e) {
    model.animationEvents(this, 200, false,400);
  },
  //滑动事件
  bindChange: function (e) {
    model.updateAreaData(this, 1, e);
    item = this.data.item;
    this.setData({
      province: item.provinces[item.value[0]].name,
      city: item.citys[item.value[1]].name,
      county: item.countys[item.value[2]].name
    });
  },
  onReachBottom: function (){
  },
  nono: function (){}
})

modelTest.wxss：

@import '../../model/model.wxss'

模版 template 创建model/model

model.wxml：

<!--model.wxml-->
<template name="msgItem">
  <view class = 'centerText'>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<!-- --------------分割线------------- -->

<template name="areaData">
  <view class="animation-element-wrapper" animation="{{animation}}" style="visibility:{{show ? 'visible':'hidden'}}" bindtap="hiddenFloatView" data-id="444">
     <view class="animation-element" catchtap="nono">
        <text class="left-bt" catchtap="hiddenFloatView" data-id="555">取消</text>
        <text class="right-bt" catchtap="hiddenFloatView" data-id="666">确定</text>
          <view class="line"></view> 

        <picker-view indicator-style = "height: 50rpx;" value="{{value}}" bindchange="bindChange" catchtap="nono">
        <!--省-->
        <picker-view-column>
           <view wx:for="{{provinces}}" wx:for-item="sheng" wx:key="">
             {{sheng.name}}
          </view>
        </picker-view-column>
        <!--地级市-->
        <picker-view-column>
          <view wx:for="{{citys}}" wx:for-item="shi" wx:key="">
            {{shi.name}}
          </view>
        </picker-view-column>
        <!--区县-->
        <picker-view-column>
          <view wx:for="{{countys}}" wx:for-item="xian" wx:key="">
            {{xian.name}}
          </view>
        </picker-view-column>
        </picker-view>
    </view>
  </view>
</template>

model.js：

// model.js
/**
 * model.js 三级联动js
 * 模板默认是广东省广州市
 * @author $wp 2018-04-09 15:26
 */
var area = require('../utils/area.js')

var areaInfo = [];//所有省市区县数据

var provinces = [];//省

var citys = [];//城市

var countys = [];//区县

var value = [0,0,0];//数据位置下标

var info = {};
var vali=[];

function updateAreaData( that, status, e){
    //获取省份数据
    var getProvinceData = function (){
      var s;
      provinces = [];
      var num = 0;
      for (var i = 0; i < areaInfo.length; i++) {
        s = areaInfo[i];
        if (s.di == "00" && s.xian == "00") {
          provinces[num] = s;
          num++;
        }
      }

      //获取当前省份的索引值 广东省 可改成自己当前的省份
      provinces.some((item, index) => {
        if (item.name.indexOf("广东省") != -1) {
          vali[0] = index;
          return;
        }
      })
      //console.log(vali[0])

      //初始化调一次传递索引值，传递省城数据
      //获取地级市数据
      getCityArr(vali[0]);

      //获取当前城市的索引值 广州市 可改成自己当前的城市
      citys.some((item, index) => {
        if (item.name.indexOf( "广州市") != -1) {
          vali[1] = index;
          return;
        }
      })
      //console.log(vali[1])

      //获取区县数据
      getCountyInfo(vali[0], vali[1]);

      //赋值
      info = {
        item: {
          provinces: provinces,
          citys: citys,
          countys: countys,
          value: value
        }
      }

      animationEvents(that, 200, false, 0);
    }

    // 获取地级市数据
    var getCityArr = function (count = 0) {
      var c;
      citys = [];
      var num = 0;
      for (var i = 0; i < areaInfo.length; i++) {
        c = areaInfo[i];
        if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") {
          citys[num] = c;
          num++;
        }
      }
      if (citys.length == 0) {
        citys[0] = { name: '' };
      }
    }

    // 获取区县数据
    var getCountyInfo = function (column0 = 0, column1 = 0) {
      var c;
      countys = [];
      var num = 0;
      for (var i = 0; i < areaInfo.length; i++) {
        c = areaInfo[i];
        if (c.xian != "00" && c.sheng == provinces[column0].sheng && c.di == citys[column1].di) {
          countys[num] = c;
          num++;
        }
      }
      if (countys.length == 0) {
        countys[0] = { name: '' };
      }
      value = [column0, column1, 0];
    }
    
    //滑动事件
    var valueChange = function(e,that){
      var val = e.detail.value
       console.log(e)
      //判断滑动的是第几个column
      //若省份column做了滑动则定位到地级市和区县第一位
      if (value[0] != val[0]) {
        val[1] = 0;
        val[2] = 0;
        getCityArr(val[0]);//获取地级市数据
        getCountyInfo(val[0], val[1]);//获取区县数据
      } else {    //若省份column未做滑动，地级市做了滑动则定位区县第一位
        if (value[1] != val[1]) {
          val[2] = 0;
          getCountyInfo(val[0], val[1]);//获取区县数据
        }
      }
      value = val;

      assignmentData(that, that.data.item.show)

      console.log(val);
      
      //回调
      //callBack(val);

    }
   
    if (status == 0){
      area.getAreaInfo(function (arr) {
        areaInfo = arr;
        //获取省份数据
        getProvinceData();

      });  
    }
    //滑动事件
    else{
      valueChange(e,that);
    }
    
}

//动画事件
function animationEvents(that, moveY, show, duration) {
  console.log("moveY:" + moveY + "\nshow:" + show);
  that.animation = wx.createAnimation({
    transformOrigin: "50% 50%",
    duration: duration,
    timingFunction: "ease",
    delay: 0
  })
  that.animation.translateY(moveY + 'vh').step()
  //赋值
  assignmentData(that,show)

}

//赋值
function assignmentData(that, show) {
  that.setData({
    item: {
      animation: that.animation.export(),
      show: show,
      provinces: provinces,
      citys: citys,
      countys: countys,
      value: value
    }
  })
}

module.exports = {
  updateAreaData: updateAreaData,
  animationEvents: animationEvents
}

model.wxss:

/* model.wxss */
page{
  background-color: rgba(255, 255, 255, 1); 
}

.infoText{
    margin-top: 20rpx;
    text-align: center;
    width: 100%;
    justify-content: center; 
}

.centerText{
  margin-top: 100rpx;
  width: 100%;
  text-align: center;
}

/* --------------分割线------------- */

picker-view{
  background-color: white;
  padding: 0;
  width: 100%; 
  height: 380rpx;
  bottom: 0;
  position: fixed;
}

picker-view-column view{
  vertical-align:middle; 
  font-size: 28rpx;
  line-height: 28rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animation-element-wrapper {
  display: flex;  
  position: fixed;
  left: 0;
  top:0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.animation-element {
  display: flex;
  position: fixed;
  width: 100%;
  height: 470rpx;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}

.animation-button {
  margin-top: 20rpx;
  top:20rpx;
  width: 400rpx;
  height: 100rpx; 
  line-height: 100rpx; 
  align-items:center;
}


.animation-element text{
  color: #999999;
  display: inline-flex;  
  position: fixed;
  margin-top: 20rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 34rpx;
  font-family: Arial, Helvetica, sans-serif;
}

.left-bt{
  left: 30rpx;
}
.right-bt {
  right: 30rpx;
}

.line{
  display: block;
  position: fixed;
  height: 1rpx;
  width: 100%;
  margin-top: 89rpx; 
  background-color: #eeeeee;
}

utils中创建area.js 和 util.js

area.js:

全国的省市县数据
gitchengzhongcun 项目中utils

util.js:

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

效果：