一：多級(jí)聯(lián)動(dòng)
微信小程序中的多級(jí)聯(lián)動(dòng)
這里用到的案例是城市選擇器
先上代碼:
.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">測(cè)試</button>
<button bindtap="yes">更新數(shù)據(jù)</button>
<view class="btn-background"><button bindtap="cancelPick">隱藏</button><button bindtap="enterPick">顯示</button></view>
<!--<view>{{year}}年{{month}}月{{day}}日</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 = [];//區(qū)，縣
var riqi;//日期
var val;//下標(biāo)
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: "大興安嶺地區(qū)",
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: "大興安嶺地區(qū)",
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部分代碼：
頁(yè)面分為2個(gè)部分，第一個(gè)部分是頁(yè)面加載時(shí)候顯示給用戶的組件。第二個(gè)部分是被第一部分覆蓋隱藏的城市選擇器部分。
其次是.wxss部分代碼：
在該部分里面設(shè)置頁(yè)面渲染時(shí)候，分層次顯示的組建
github:https://github.com/H1H1T/picker-view.git
picker-view-master.zip
二：自定義圓形進(jìn)度條
無(wú)圖無(wú)真相，先上圖：
實(shí)現(xiàn)思路，先繪制底層的灰色圓圈背景，再繪制上層的藍(lán)色進(jìn)度條。
代碼實(shí)現(xiàn)：
JS代碼：
Page({
data: {},
onLoad: function (options) {
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
},
onReady: function () {
// 頁(yè)面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//創(chuàng)建并返回繪圖上下文context對(duì)象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#d2d2d2');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//開(kāi)始一個(gè)新的路徑
cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//設(shè)置一個(gè)原點(diǎn)(106,106)，半徑為100的圓的路徑到當(dāng)前路徑
cxt_arc.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//開(kāi)始一個(gè)新的路徑
cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
cxt_arc.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
cxt_arc.draw();
},
onShow: function () {
// 頁(yè)面顯示
},
onHide: function () {
// 頁(yè)面隱藏
},
onUnload: function () {
// 頁(yè)面關(guān)閉
}
})
頁(yè)面布局：
<view class="wrap">
<view class="top">
<canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
</canvas>
<view class="cc">中間</view>
</view>
</view>
CSS樣式：
.cir{
display: inline-block;
margin-top: 20rpx;
}
.top{
text-align: center
}
.cc{
margin-top: -120px;
}
|
|
