一：多级联动

微信小程序中的多级联动

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

先上代码:

.wxml

{{nian}}--{{yue}}--{{ri}}

隐藏显示

测试

更新数据

隐藏显示

{{item}}

{{item}}

{{item}}

.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部分代码：

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

picker-view-master.zip

二：自定义圆形进度条

无图无真相，先上图：

实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。

代码实现：

JS代码：

Page({

data: {},

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

},

onReady: function () {

// 页面渲染完成

var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。

cxt_arc.setLineWidth(6);

cxt_arc.setStrokeStyle('#d2d2d2');

cxt_arc.setLineCap('round')

cxt_arc.beginPath();//开始一个新的路径

cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径

cxt_arc.stroke();//对当前路径进行描边

cxt_arc.setLineWidth(6);

cxt_arc.setStrokeStyle('#3ea6ff');

cxt_arc.setLineCap('round')

cxt_arc.beginPath();//开始一个新的路径

cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);

cxt_arc.stroke();//对当前路径进行描边

cxt_arc.draw();

},

onShow: function () {

// 页面显示

},

onHide: function () {

// 页面隐藏

},

onUnload: function () {

// 页面关闭

}

})

页面布局：

中间

CSS样式：

.cir{

display: inline-block;

margin-top: 20rpx;

}

.top{

text-align: center

}

.cc{

margin-top: -120px;

}