微信小程序?qū)崿F(xiàn)圓心進(jìn)度條
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)圓心進(jìn)度條的具體代碼，供大家參考，具體內(nèi)容如下
一、創(chuàng)建項(xiàng)目結(jié)構(gòu)
打開(kāi)微信開(kāi)發(fā)者工具創(chuàng)建一個(gè)項(xiàng)目， 新建 與 pages 同級(jí)目錄 components，在 components 中新建一個(gè)目錄 circle ，circle 中新建 Component 命名為 circle，此時(shí)將自動(dòng)生成 json、wxml、wxss、js 4 個(gè)文件。結(jié)構(gòu)如下：
二、編寫(xiě)組件
首先需要在 json 文件中進(jìn)行自定義組件聲明（將 component 字段設(shè)為 true，可將這一組文件設(shè)為自定義組件）。
{
"component": true
}同時(shí)，還要在 wxml 文件中編寫(xiě)組件模版，在 wxss 文件中加入組件樣式，這里編寫(xiě)圓環(huán)進(jìn)度條的模板和樣式，參見(jiàn)微信小程序之圓形進(jìn)度條。
要注意 canvas 繪制的是 px 為單位的，所以這里統(tǒng)一用 px 單位；其中 size 是根據(jù) canvas 繪制的圓環(huán)的直徑，后面在 js 中會(huì)提到。
在組件的 wxml 中可以包含 slot 節(jié)點(diǎn)，用于承載組件使用者提供的 wxml 結(jié)構(gòu)。
<!-- components/circle/circle.wxml -->
<view class="circle_box" style="width:{{size}}px;height:{{size}}px">
? ? ? ? ? <canvas class="circle_bg" canvas-id="{{bg}}" style="width:{{size}}px;height:{{size}}px"></canvas>?
? ? ? ? ? <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas>?
? ? ? ? ? <slot></slot>?
</view>注意：在組件 wxss 中不應(yīng)使用 ID 選擇器、屬性選擇器和標(biāo)簽名選擇器。
/* components/circle/circle.wxss */
.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: absolute;}編寫(xiě) js
在自定義組件的 js 文件中，需要使用 Component() 來(lái)注冊(cè)組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。
組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的。更多細(xì)節(jié)參考 Component 構(gòu)造器。
/* components/circle/circle.js */
Component({
? ……
? methods: {
? ? /* id : canvas 組件的唯一標(biāo)識(shí)符 canvas-id ，x : canvas 繪制圓形的半徑， w : canvas 繪制圓環(huán)的寬度 ?*/
? ? drawCircleBg: function (id, x, w) {
? ? ? // 設(shè)置圓環(huán)外面盒子大小 寬高都等于圓環(huán)直徑
? ? ? this.setData({
? ? ? ? size: 2 * x
? ? ? });
? ? ? // 使用 wx.createContext 獲取繪圖上下文 ctx ?繪制背景圓環(huán)
? ? ? var ctx = wx.createCanvasContext(id)
? ? ? ctx.setLineWidth(w / 2); ctx.setStrokeStyle('#20183b'); ctx.setLineCap('round')
? ? ? ctx.beginPath();//開(kāi)始一個(gè)新的路徑
? ? ? //設(shè)置一個(gè)原點(diǎn)(x,y)，半徑為r的圓的路徑到當(dāng)前路徑 此處x=y=r
? ? ? ctx.arc(x, x, x - w, 0, 2 * Math.PI, false);
? ? ? ctx.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
? ? ? ctx.draw();
? ? },
? ? drawCircle: function (id, x, w, step) {
? ? ? // 使用 wx.createContext 獲取繪圖上下文 context ?繪制彩色進(jìn)度條圓環(huán)
? ? ? var context = wx.createCanvasContext(id);
? ? ? // 設(shè)置漸變
? ? ? var gradient = context.createLinearGradient(2 * x, x, 0);
? ? ? gradient.addColorStop("0", "#2661DD"); gradient.addColorStop("0.5", "#40ED94"); gradient.addColorStop("1.0", "#5956CC");
? ? ? context.setLineWidth(w); context.setStrokeStyle(gradient); context.setLineCap('round')
? ? ? context.beginPath();//開(kāi)始一個(gè)新的路徑
? ? ? // step 從0到2為一周
? ? ? context.arc(x, x, x - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
? ? ? context.stroke();//對(duì)當(dāng)前路徑進(jìn)行描邊
? ? ? context.draw()
? ? },
? ? _runEvent() {
? ? ? //觸發(fā)自定義組件事件
? ? ? this.triggerEvent("runEvent")
? ? }
? },
? ……
})自定義組件圓形進(jìn)度條到此已經(jīng)完成。
使用自定義組件
下面我們?cè)?index 中使用自定義組件圓形進(jìn)度條。
一、json 文件中進(jìn)行引用聲明
使用已注冊(cè)的自定義組件前，首先要在頁(yè)面的 json 文件中進(jìn)行引用聲明。此時(shí)需要提供每個(gè)自定義組件的標(biāo)簽名和對(duì)應(yīng)的自定義組件文件路徑：
{
? "usingComponents": {
? ? "circle": "/components/circle/circle"
? }
}二、wxml 文件中使用自定義組件
這樣，在頁(yè)面的 wxml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值。
- 節(jié)點(diǎn)名即自定義組件的標(biāo)簽名：circle；
- 節(jié)點(diǎn)屬性即傳遞給組件的屬性值：bg，draw；
- 當(dāng)自定義組件觸發(fā) runEvent 事件時(shí)，調(diào)用_runEvent 方法。
<!--index.wxml-->
<view class="container">
? ? <circle id='circle1'
? ? ? bg='circle_bg1'
? ? ? draw='circle_draw1'
? ? ? bind:runEvent="_runEvent" >
? ? ? ? <!-- 這部分內(nèi)容將被放置在組件 <slot> 的位置上 -->
? ? ? ? <view class="circle_info" bindtap="changeTime">
? ? ? ? ? ? ?<view class="circle_dot"></view>
? ? ? ? ? ? ?<text class='circle_txt'> {{txt}} </text>
? ? ? ?</view>
? ? </circle>
</view>自定義組件的 wxml 節(jié)點(diǎn)結(jié)構(gòu)在與數(shù)據(jù)結(jié)合之后，將被插入到引用位置內(nèi)。在 wxss 給 slot 位置上的內(nèi)容添加一些樣式。
/**index.wxss**/
/*圓環(huán)進(jìn)度條文字*/
.circle_info{
? position: absolute;?
? width: 100%;
? left: 50%;
? top: 50%;?
? transform: translate(-50%,-50%);?
? display: flex; ?
? align-items: center;
? justify-content: center
}
.circle_dot{
? width:16rpx;
? height: 16rpx; ?
? border-radius: 50%;
? background-color: #fb9126;
}?
.circle_txt{
? padding-left: 10rpx;
? color: #fff;
? font-size: 36rpx;?
? letter-spacing: 2rpx;
}三、js 文件中調(diào)用自定義組件中的方法
在 wxml 中我們用到一個(gè)數(shù)據(jù) {{txt}}，我們需要在 js 中設(shè)置一下 data，然后在 onReady 中使用 selectComponent 選擇組件實(shí)例節(jié)點(diǎn)。
//index.js
?data: {?
? ? txt: "正在匹配中..."?
? },
?onReady: function () {
? ?// 獲得circle組件
? ? this.circle = this.selectComponent("#circle1");
? ? // 繪制背景圓環(huán)
? ? this.circle.drawCircleBg('circle_bg1', 100, 8)
? ? // 繪制彩色圓環(huán)?
? ? this.circle.drawCircle('circle_draw1', 100, 8, 2); ?
? },效果如下：
this.circle.drawCircle('circle_draw1', 100, 8, 0.5);
this.circle.drawCircle('circle_draw1', 100, 8, 1);
this.circle.drawCircle('circle_draw1', 100, 8, 2);
接下來(lái)要寫(xiě)定時(shí)器方法了，在定時(shí)器中每隔一段時(shí)間調(diào)用一次 this.circle.drawCircle(id, x, w, step)，通過(guò)改變 step 的值來(lái)動(dòng)態(tài)繪制圓環(huán)。
1.在 data 中設(shè)置幾個(gè)初始值
2.定義一個(gè)定時(shí)器方法 countInterval，假設(shè)每隔 100 毫秒 count 遞增 +1，當(dāng) count 遞增到 100 的時(shí)候剛好是一個(gè)圓環(huán)，然后改變 txt 值并且清除定時(shí)器
3.在 onReady 中調(diào)用這個(gè)定時(shí)器方法
data: {?
? ? txt: "正在匹配中...",
? ? count: 0,//計(jì)數(shù)器，初始值為0
? ? maxCount: 100, // 繪制一個(gè)圓環(huán)所需的步驟?
? ? countTimer: null,//定時(shí)器，初始值為null
? },
? ?countInterval: function () {
? ? // 設(shè)置倒計(jì)時(shí) 定時(shí)器 假設(shè)每隔100毫秒 count遞增+1，當(dāng) count遞增到兩倍maxCount的時(shí)候剛好是一個(gè)圓環(huán)（ step 從0到2為一周），然后改變txt值并且清除定時(shí)器
? ? this.countTimer = setInterval(() => { ??
? ? ? if (this.data.count <= 2 * this.data.maxCount) { ? ? ? ?
? ? ? ? // 繪制彩色圓環(huán)進(jìn)度條
? ? ? ? this.circle.drawCircle('circle_draw1', 100, 8, this.data.count / this.data.maxCount)
? ? ? ? this.data.count++;
? ? ? ? } else {
? ? ? ? this.setData({
? ? ? ? ? txt: "匹配成功"
? ? ? ? });
? ? ? ? ?clearInterval(this.countTimer);?
? ? ? }
? ? }, 100)
? },
?onReady: function () {
? ?// 獲得circle組件
? ? this.circle = this.selectComponent("#circle1");
? ? // 繪制背景圓環(huán)
? ? this.circle.drawCircleBg('circle_bg1', 100, 8)
? ? // 繪制彩色圓環(huán)?
? ? // this.circle.drawCircle('circle_draw1', 100, 8, 2); ?
? ? this.countInterval()
? },最終效果
再次使用自定義組件做倒計(jì)時(shí)
count 可以遞增，當(dāng)然可以遞減。這里就不在贅述，直接上代碼：
wxml
<circle id='circle'
bg='circle_bg'
draw='circle_draw'
bind:runEvent="_runEvent" >
? <view class="circle_text" bindtap="changeTime">
? <text class='circle_time'> {{time}} s</text></view>
</circle>wxss
/*圓環(huán)倒計(jì)時(shí)*/
.circle_text{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.circle_time{
color: #fff;
font-size: 32rpx;
padding-left: 16rpx;
}js
const app = getApp()
Page({
? ……
? stepInterval: function () {
? ? var n = this.data.num / 2 ?// 設(shè)置倒計(jì)時(shí) 定時(shí)器
? ? this.stepTimer = setInterval(() => {
? ? ? if (this.data.num >= 0) {
? ? ? ? this.data.step = this.data.num / n;
? ? ? ? this.circle.drawCircle('circle_draw', 40, 4, this.data.step)// 繪制彩色圓環(huán)進(jìn)度條
? ? ? ? if ((/(^[1-9]\d*$)/.test(this.data.num / 10))) {
? ? ? ? ? this.setData({ // 當(dāng)時(shí)間為整數(shù)秒的時(shí)候 改變時(shí)間
? ? ? ? ? ? time: this.data.num / 10
? ? ? ? ? });
? ? ? ? }
? ? ? ? this.data.num--;
? ? ? } else {
? ? ? ? this.setData({
? ? ? ? ? time: 0
? ? ? ? });
? ? ? }
? ? }, 100)
? },
? changeTime: function () {
? ? clearInterval(this.stepTimer);
? ? this.setData({
? ? ? num: 100
? ? });
? ? this.stepInterval() // 重新開(kāi)啟倒計(jì)時(shí)
? ? this._runEvent() // 觸發(fā)自定義組件事件
? },
? ……
})最終效果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解微信小程序——自定義圓形進(jìn)度條
- 微信小程序?qū)崿F(xiàn)下載進(jìn)度條的方法
- 微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能
- 微信小程序?qū)崿F(xiàn)實(shí)時(shí)圓形進(jìn)度條的方法示例
- 微信小程序多音頻播放進(jìn)度條問(wèn)題
- 微信小程序自定義組件實(shí)現(xiàn)環(huán)形進(jìn)度條
- 微信小程序之圓形進(jìn)度條實(shí)現(xiàn)思路
- 微信小程序自定義音樂(lè)進(jìn)度條的實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)圓形進(jìn)度條動(dòng)畫(huà)
- 微信小程序繪制半圓（弧形）進(jìn)度條
相關(guān)文章
在父頁(yè)面得到zTree已選中的節(jié)點(diǎn)的方法
這篇文章主要介紹了在父頁(yè)面得到zTree已選中的節(jié)點(diǎn)的方法,實(shí)例分析了zTree針對(duì)節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
JS基于正則表達(dá)式的替換操作(replace)用法示例
這篇文章主要介紹了JS基于正則表達(dá)式的替換操作(replace)用法,結(jié)合具體實(shí)例形式詳細(xì)分析了replace函數(shù)的語(yǔ)法、參數(shù)及具體使用技巧,需要的朋友可以參考下2017-04-04
微信開(kāi)發(fā)之微信jssdk錄音功能開(kāi)發(fā)示例
這篇文章主要介紹了微信開(kāi)發(fā)之微信jssdk錄音功能開(kāi)發(fā)示例，在微信瀏覽器內(nèi)打開(kāi)的頁(yè)面，制作一個(gè)按鈕，用戶按住按鈕后開(kāi)始錄音，松手后停止錄音，感興趣的小伙伴們可以參考一下2018-10-10
Java與JavaScript中判斷兩字符串是否相等的區(qū)別
這篇文章主要介紹了Java與JavaScript中判斷兩字符串是否相等的區(qū)別,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實(shí)現(xiàn)方法,簡(jiǎn)單分析了javascript觀察者模式的原理、功能并結(jié)合實(shí)例形式給出了觀察者模式的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢操作的方法,以實(shí)例形式分析了輪詢操作的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
ES6標(biāo)準(zhǔn)新增了一種新的函數(shù)，Arrow?Function（箭頭函數(shù)），箭頭函數(shù)相當(dāng)于匿名函數(shù)，并且簡(jiǎn)化了函數(shù)定義，本文重點(diǎn)給大家介紹JavaScript中的箭頭函數(shù),需要的朋友可以參考下2022-11-11
本文為大家詳細(xì)介紹下使用Java/JS如何獲取flash的高寬，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-12-12
使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解
今天小編就為大家分享一篇使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
layui結(jié)合form,table的全選、反選v1.0示例講解
今天小編就為大家分享一篇layui結(jié)合form,table的全選、反選v1.0示例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08