备案域名大量出售QQ582001116微信小程序小技巧系列《十三》多级联动，自定义圆形进度条 ... ...

258资源分享 > 建站学院 > 微信开发 > 微信小程序小技巧系列《十三》多级联动，自定义圆形进度条 ... ...

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

微信小程序小技巧系列《十三》多级联动，自定义圆形进度条 ... ...

发布时间:2020-12-19

一：多级联动

微信小程序中的多级联动

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

先上代码:

.wxml

<view class="{{boxHide}}"> <view>{{nian}}--{{yue}}--{{ri}}</view> <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindtap="enterPick">显示</button> </view> </view> <view class="{{boxHide}}" style="background-color: #fff;position: fixed;top: 0;left: 0;right: 0;bottom: 0;"></view> <view class="picker-box {{showBox}}"> <button bindtap="enter">测试</button> <button bindtap="yes">更新数据</button> <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindtap="enterPick">显示</button></view>  <picker-view class="{{showOrHide}}" hidden="{{Boolean}}" indicator-style="height: 50px;" style="background-color:#dddddd;width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"> <picker-view-column> <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> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" style="line-height: 50px;font-size:15px;text-align: center;">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" style="line-height: 50px;font-size:15px;text-align: center;">{{item}}</view> </picker-view-column> </picker-view> </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 .picker-box { position: fixed; width: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .box-hide { z-index: -12; } .box-show { z-index: -1; } .show-box{ z-index: 1; } picker-view{ position: absolute; bottom: 0; } .hide-show{ z-index: -13; }

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

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

其次是.wxss部分代码：

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

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

picker-view-master.zip

二：自定义圆形进度条

无图无真相，先上图：

本文标签

:备案管家服务帮您把复杂流程变简单，解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名，企业500/5个域名，qq1650004.

程序自定义微信技巧系列进度联动多级圆形十三

258资源分享网

分类

推荐文章

推荐下载

微信小程序小技巧系列《十三》多级联动，自定义圆形进度条 ... ...

本文标签