小程序Progress组件介绍

官方文档

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性

小程序所有可视的组件都可以绑定tap事件bindtap，即使没有在属性里面显示的标明。

小程序中Boolean属性如果为真则只需要写上属性名就好了，如果要设置成假，则需要写成属性名=“false”。

属性	类型	默认值	必填	说明
percent	number		否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	6	否	进度条线的宽度（这是从进度条前进的方向上来看的，从表象上来看，其实就是组件的高度）
color	string	#09BB07	否	进度条颜色（请使用activeColor）
activeColor	string	#09BB07	否	已选择的进度条的颜色
backgroundColor	string	#EBEBEB	否	未选择的进度条的颜色
active	boolean	false	否	进度条从左往右的动画
active-mode	string	backwards	否	backwards: 动画从头播；forwards：动画从上次结束点接着播（实践中一般使用forwards）
duration	number	30	否	进度增加1%所需毫秒数
bindactiveend	eventhandle		否	动画完成事件

小程序颜色设计规范

#09BB07 是默认的activeColor颜色，是完成色。
#353535 也叫Semi，是大段说明文字且属于主要内容的，例如正文。
#888888 也叫Grey，用于次要内容。
#576b95 链接色。
#e64340 警告色。
纯黑色Black一般用于主内容。
浅黑色Light一般用于时间戳与表单缺省值。
backgroundColor默认的颜色值#EBEBEB。
在Weui代码库中，默认按钮的底色是#F2F2F2。

常见问题

如何实现一个下载文件并显示动态进度条的功能？

启用Progress属性active和active-mode =“forwards”。
通过文件总大小和下载完成大小，可以实时计算出percent的数值。需要注意的是percent属性是动态绑定的，每次此数值变化后，我们需要显示使用setData触发视图更新。

Progress已产生的进度条如何设置圆角？

<progress border-radius="5" percent="20" show-info />

Progress组件的border-radius属性设置的是组件外部的圆角大小，它无法设置内部已经前进的进度条圆角。

直接改变小程序Progress组件的内部样式，进行覆盖。

当然此方法是野路子，如果有一天微信团队修改了此类名，也就不能用了。

.wx-progress-inner-bar {width:0;height: 100%;
}
.wx-progress-inner-bar {border-radius:5px;
}

已经加载完的进度条Progress，如何单击某个按钮让他重新加载呢？

有两种实现方法，但是原理都是延迟一部分操作到下一个时间片（渲染周期）再执行。

方法一，使用nextTick函数，或者在不支持nextTick的版本中使用setTimeout函数。

此处setTimeout时间设置为17ms，是由于一般手机屏幕的刷新频率是大于等于60赫兹，所以一秒60帧刷新能保证一个比较流畅的视觉效果，1000/60 = 16.6666 ms。

方法二，调用两次setData，因为每次setData在底层都需要调用evaluateJavascript这个底层函数，这个函数它用于小程序的逻辑层与视图层之间的通讯。他的执行本身就需要时间。

具体代码如下：

<view class="gap">已经加载完的进度条Progress，如何单击某个按钮让他重新加载呢？</view>
<button bindtap="resetProgress">重置</button>
<button bindtap="resetProgressYet">重置YET</button>
<progress border-radius="5" active-mode="forwards" active  show-info percent="{{percentValue}}"></progress>

Page({/*** 页面的初始数据*/data: {percentValue: 20,},resetProgress() {this.setData({percentValue: 0});if (wx.canIUse('nextTick')) {wx.nextTick(() => {this.setData({percentValue: 100});});} else {setTimeout(() => {this.setData({percentValue: 0});}, 17)}},resetProgressYet(){this.setData({percentValue: 0});this.setData({percentValue: 100});},
})

能否设计一个环形进度条？

使用Canvas创建自定义组件：原理是这样的，用css设计两个圆，一个灰色的大部外圆，和一个白色的内部小圆，然后根据percent值的变化，控制canvas进行已完成进度的绘制。

在自定义组件中使用wx.createCanvasContent创建画布的上下文绘制对象时，需要在第二个参数处传递this对象。这样才是在组件中查找画布。不然就会变成了在引用它的页面中查找。

使用wx.createSelectorQuery创建对象的select方法，以ID查找组件对象时，如果在自定义组件中，必须在查找前先调用一下他的in方法，把this对象传递进去，不然组件是查找不到的。默认组件查询也只是在主页面查找，不会去查引用组件中的子组件。

具体代码如下：

组件代码

// progress/circle-progress/index.js
Component({runTimeid: 0,behaviors: [],/*** 组件的属性列表*/properties: {percent: {type: Number,value: 50,observer: function (newVal, oldVal) {this.draw(newVal);}}},/*** 组件的初始数据，属于私有数据，可用于模板渲染*/data: {//百分比percentage: '',//动画执行时间animTime: ''},ready() {if (this.data.percent) this.draw(this.data.percent);},/*** 组件的方法列表*/methods: {// 绘制圆形进度条方法run(c,w,h){let that = this;var num = (2 * Math.PI / 100 * c) - 0.5 * Math.PI;that.ctx2.arc(w, h, w - 8, -0.5 * Math.PI, num);that.ctx2.setStrokeStyle('#09bb07');//绿色that.ctx2.setLineWidth('16');that.ctx2.setLineCap('butt');that.ctx2.stroke();that.ctx2.beginPath();that.ctx2.setFontSize(40);//设置字体大小，不能加引号that.ctx2.setFillStyle('#b2b2b2');//灰色字体that.ctx2.setTextAlign('center');that.ctx2.setTextBaseline('middle');that.ctx2.fillText(c+' %',w,h);that.ctx2.draw();},// 实现动画效果canvasTap(start,end,time,w,h){let that = this;start++;if(start>end){return false;}that.run(start,w,h);that.runTimerid=setTimeout(function(){that.canvasTap(start,end,time,w,h);},time);},draw(percent) {const id = 'runCanvas';const animTime = 500;if(percent>100)returnif(!this.ctx2){const ctx2=wx.createCanvasContext(id, this)this.ctx2 = ctx2}let oldPercentValue = this.data.percentage;this.setData({percentage:percent,animTime:animTime});var time = this.data.animTime/(this.data.percentage-oldPercentValue);const query = wx.createSelectorQuery().in(this)query.select('#'+id).boundingClientRect((res)=>{var w = parseInt(res.width/2);var h = parseInt(res.height/2);if(this.runTimeid) clearTimeout(this.runTimeid)this.canvasTap(oldPercentValue,percent,time,w,h)}).exec()}}
})

<!--  progress/circle-progress/index.wxml -->
<view class="canvasBox"><!-- 外部灰色的圆  --><view class="bigCircle"></view><!-- 内部白色的圆 --><view class="littleCircle"></view><canvas canvas-id="runCanvas" id="runCanvas" class="canvas"></canvas>
</view>

/* progress/circle-progress/index.wxss */
.canvasBox {height: 500rpx;position: relative;background-color: white;
}.bigCircle {width: 420rpx;height: 420rpx;border-radius: 50%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto auto;background-color: #f2f2f2;
}.littleCircle {width: 350rpx;height: 350rpx;border-radius: 50%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto auto;background-color: white;
}.canvas {width: 420rpx;height: 420rpx;border-radius: 50%;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto auto;z-index: 99;
}

页面使用代码

引用组件申明

{"usingComponents": {"circle-progress": "./circle-progres/index"}
}

具体使用

<view class="gap">能否设计一个环形进度条？</view>
<circle-progress id="progress1" percent="{{percentValue}}" />
<button bindtap="drawProgress">绘制</button>

// progress/progress.js
Page({/*** 页面的初始数据*/data: {percentValue: 20,},drawProgress(){if(this.data.percentValue>=100){this.setData({percentValue:0})}this.setData({percentValue:this.data.percentValue+10})}
})

Progress组件进度的百分比数字怎么设置？

有两种方法：

第一种，直接覆盖组件内部的样式，这属于全局改变。

<view class="gap">Progress组件进度的百分比数字怎么设置？</view>
<progress percent="40" stroke-width="5" show-info />

.wx-progress-info{color:red;
}

第二种，使用内联样式。

<view class="gap">Progress组件进度的百分比数字怎么设置？</view>
<progress percent="40" stroke-width="5" show-info style="color:red"/>

Progress组件右侧的百分比文字，与左边离得太近了，可否增加一个边距？

直接覆盖组件内部的样式。

<view class="gap">Progress组件右侧的百分比文字，与左边离得太近了，可否增加一个边距？</view>
<progress percent="40" stroke-width="5" show-info />

.wx-progress-info{margin-left: 5px;
}

小程序Progress组件介绍相关推荐

每日优鲜小程序基础组件介绍
每日优鲜小程序基础组件介绍 1.基础组件介绍 2.基础组件的结构与作用 3.基础组件的接入方法初次引入初始化更新与维护基础组件接入 1.基础组件介绍小程序基础组件基于每日优鲜主商城小程序业务 ...
微信小程序--自定义组件（超详细从新建到使用）
微信小程序–自定义组件微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
微信小程序 MinUI 组件库系列之 progress 进度条组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 price 价格组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.小程序组件化框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础的组件 ...
微信小程序 MinUI 组件库系列之 loadmore 页底组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 abnor 异常流组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
微信小程序 MinUI 组件库系列之 label 标签组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...

小程序Progress组件介绍

小程序Progress组件介绍

小程序颜色设计规范

常见问题

如何实现一个下载文件并显示动态进度条的功能？

Progress已产生的进度条如何设置圆角？

已经加载完的进度条Progress，如何单击某个按钮让他重新加载呢？

能否设计一个环形进度条？

Progress组件进度的百分比数字怎么设置？

Progress组件右侧的百分比文字，与左边离得太近了，可否增加一个边距？

小程序Progress组件介绍相关推荐

最新文章

热门文章