微信小程序-多级联动
微信小程序中的多级联动
这里用到的案例是城市选择器
先上代码:
.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;width: 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;width: 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 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