AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:01:59

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序小技巧系列《十三》多级联动,自定义圆形进度条 ... ...
相关的资讯,希望对您有帮助。

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

小技巧系列,为一些基础性技巧或知识点,你可以在相关文章内看到本系列其他文章;一:多级联动作者:塘下七武海-涛,来自原文地址微信小程序中的多级联动这里用到的案例是城市选择器先上代码:.wxml 1 view class={{ ...

一:多级联动

作者:塘下七武海-涛,来自原文地址 
微信小程序中的多级联动

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

先上代码:

.wxml

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

.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

二:自定义圆形进度条

作者:wlvoid,来自原文地址

无图无真相,先上图:

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

代码实现:

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;  

}  

66阅读 | 0评论
你的回应
写文章

6932