微信小程序中的多级联动

这里用到的案例是城市选择器

先上代码:

.wxml

1 
     
       2     
      
       {
   {nian}}--{
   {yue}}--{
   {ri}}
       3     
      
       隐藏
       显示 4     
       5 
      6 
      7 
     
       8     
      测试 9     
      更新数据10     
      
       隐藏
       显示
      11   
      12   
      23 
     

.js

var utils = require('../../utils/util');const p = [];//省const a = [];//市const c = [];//区，县var riqi;//日期var val;//下标Page({    data: {        boxHide:"box-show",        showBox:"hide-show"    },    onLoad: function (options) {        var dataC = utils.getData();        p.push(dataC.p);//province        a.push(dataC.a);//area        c.push(dataC.c);//city    },    bindChange: function (e) {        val = e.detail.value;        riqi = this.data;        this.setData({            months: c[0][riqi.years[val[0]]],            days: a[0][riqi.months[val[1]]]        })    },    yes: function () {
   //获取城市信息        if (typeof (riqi) == "undefined") {            this.setData({                nian: "黑龙江省",                yue: "大兴安岭地区",                ri: "塔河县"            })        } else {            this.setData({                nian: this.data.years[val[0]],                yue: this.data.months[val[1]],                ri: this.data.days[val[2]]            })        }    },    cancelPick: function () {        this.setData({            boxHide:"box-show",            showBox:"hide-show"        })    },    enterPick: function () {        console.log(c[0][p[0][0]][0]);        this.setData({            boxHide:"box-hide",            showBox:"show-box",            years: p[0],            months: c[0][p[0][0]],            days: a[0][c[0][p[0][0]][0]]        })    },    enter: function () {        if (typeof (riqi) == "undefined") {            this.setData({                nian: "黑龙江省",                yue: "大兴安岭地区",                ri: "塔河县"            })        } else {            this.setData({                nian: this.data.years[val[0]],                yue: this.data.months[val[1]],                ri: this.data.days[val[2]]            })        }    }});

.wxss

1 .picker-box { 2     position: fixed; 3     width: 100%; 4     top: 0; 5     left: 0; 6     right: 0; 7     bottom: 0; 8     background-color: rgba(0, 0, 0, 0.5); 9 10 }11 .box-hide {12     z-index: -12;13 }14 .box-show {15     z-index: -1;16 }17 18 .show-box{19     z-index: 1;20 }21 22 picker-view{23     position: absolute;24     bottom: 0;25 }26 .hide-show{27     z-index: -13;28 }

首先讲解下.wxml部分代码：

页面分为2个部分，第一个部分是页面加载时候显示给用户的组件。第二个部分是被第一部分覆盖隐藏的城市选择器部分。

 

其次是.wxss部分代码：

在该部分里面设置页面渲染时候，分层次显示的组建

github:https://github.com/H1H1T/picker-view.git