微信小程序-多级联动

微信小程序中的多级联动

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

先上代码:

.wxml

 1 <view class="{{boxHide}}">
 2     <view>{{nian}}--{{yue}}--{{ri}}</view>
 3     <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindtap="enterPick">显示</button>
 4     </view>
 5 </view>
 6 <view class="{{boxHide}}" style="background-color: #fff;position: fixed;top: 0;left: 0;right: 0;bottom: 0;"></view>
 7 <view class="picker-box {{showBox}}">
 8     <button bindtap="enter">测试</button>
 9     <button bindtap="yes">更新数据</button>
10     <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindtap="enterPick">显示</button></view>
11   <!--<view>{{year}}年{{month}}月{{day}}日</view>-->
12   <picker-view class="{{showOrHide}}" hidden="{{Boolean}}" indicator-style="height: 50px;" style="background-color:#dddddd; 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
13     <picker-view-column>
14       <view wx:for="{{years}}" bindscroll="scrollProvince" style="line-height: 50px;font-size:15px;text-align: center; 120rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin: 0 auto;">{{item}}</view>
15     </picker-view-column>
16     <picker-view-column>
17       <view wx:for="{{months}}" style="line-height: 50px;font-size:15px;text-align: center;">{{item}}</view>
18     </picker-view-column>
19     <picker-view-column>
20       <view wx:for="{{days}}" style="line-height: 50px;font-size:15px;text-align: center;">{{item}}</view>
21     </picker-view-column>
22   </picker-view>
23 </view>

.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      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