小程序模板網(wǎng)

微信小程序小技巧系列《十三》多級(jí)聯(lián)動(dòng),自定義圓形進(jìn)度條 ... ...

發(fā)布時(shí)間:2018-02-06 16:43 所屬欄目:小程序開(kāi)發(fā)教程

一:多級(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;  

}  

 
 
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/21663.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢