微信小程序?qū)崿F(xiàn)圓心進度條
本文實例為大家分享了微信小程序?qū)崿F(xiàn)圓心進度條的具體代碼,供大家參考,具體內(nèi)容如下
一、創(chuàng)建項目結(jié)構(gòu)
打開微信開發(fā)者工具創(chuàng)建一個項目, 新建 與 pages 同級目錄 components,在 components 中新建一個目錄 circle ,circle 中新建 Component 命名為 circle,此時將自動生成 json、wxml、wxss、js 4 個文件。結(jié)構(gòu)如下:
二、編寫組件
首先需要在 json 文件中進行自定義組件聲明(將 component 字段設(shè)為 true,可將這一組文件設(shè)為自定義組件)。
{ "component": true }
同時,還要在 wxml 文件中編寫組件模版,在 wxss 文件中加入組件樣式,這里編寫圓環(huán)進度條的模板和樣式,參見微信小程序之圓形進度條。
要注意 canvas 繪制的是 px 為單位的,所以這里統(tǒng)一用 px 單位;其中 size 是根據(jù) canvas 繪制的圓環(huán)的直徑,后面在 js 中會提到。
在組件的 wxml 中可以包含 slot 節(jié)點,用于承載組件使用者提供的 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;}
編寫 js
在自定義組件的 js 文件中,需要使用 Component() 來注冊組件,并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。
組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 wxml 的渲染,其中,屬性值是可由組件外部傳入的。更多細節(jié)參考 Component 構(gòu)造器。
/* components/circle/circle.js */ Component({ ? …… ? methods: { ? ? /* id : canvas 組件的唯一標(biāo)識符 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();//開始一個新的路徑 ? ? ? //設(shè)置一個原點(x,y),半徑為r的圓的路徑到當(dāng)前路徑 此處x=y=r ? ? ? ctx.arc(x, x, x - w, 0, 2 * Math.PI, false); ? ? ? ctx.stroke();//對當(dāng)前路徑進行描邊 ? ? ? ctx.draw(); ? ? }, ? ? drawCircle: function (id, x, w, step) { ? ? ? // 使用 wx.createContext 獲取繪圖上下文 context ?繪制彩色進度條圓環(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();//開始一個新的路徑 ? ? ? // step 從0到2為一周 ? ? ? context.arc(x, x, x - w, -Math.PI / 2, step * Math.PI - Math.PI / 2, false); ? ? ? context.stroke();//對當(dāng)前路徑進行描邊 ? ? ? context.draw() ? ? }, ? ? _runEvent() { ? ? ? //觸發(fā)自定義組件事件 ? ? ? this.triggerEvent("runEvent") ? ? } ? }, ? …… })
自定義組件圓形進度條到此已經(jīng)完成。
使用自定義組件
下面我們在 index 中使用自定義組件圓形進度條。
一、json 文件中進行引用聲明
使用已注冊的自定義組件前,首先要在頁面的 json 文件中進行引用聲明。此時需要提供每個自定義組件的標(biāo)簽名和對應(yīng)的自定義組件文件路徑:
{ ? "usingComponents": { ? ? "circle": "/components/circle/circle" ? } }
二、wxml 文件中使用自定義組件
這樣,在頁面的 wxml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點名即自定義組件的標(biāo)簽名,節(jié)點屬性即傳遞給組件的屬性值。
- 節(jié)點名即自定義組件的標(biāo)簽名:circle;
- 節(jié)點屬性即傳遞給組件的屬性值:bg,draw;
- 當(dāng)自定義組件觸發(fā) runEvent 事件時,調(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é)點結(jié)構(gòu)在與數(shù)據(jù)結(jié)合之后,將被插入到引用位置內(nèi)。在 wxss 給 slot 位置上的內(nèi)容添加一些樣式。
/**index.wxss**/ /*圓環(huá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 中我們用到一個數(shù)據(jù) {{txt}},我們需要在 js 中設(shè)置一下 data,然后在 onReady 中使用 selectComponent 選擇組件實例節(jié)點。
//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);
接下來要寫定時器方法了,在定時器中每隔一段時間調(diào)用一次 this.circle.drawCircle(id, x, w, step),通過改變 step 的值來動態(tài)繪制圓環(huán)。
1.在 data 中設(shè)置幾個初始值
2.定義一個定時器方法 countInterval,假設(shè)每隔 100 毫秒 count 遞增 +1,當(dāng) count 遞增到 100 的時候剛好是一個圓環(huán),然后改變 txt 值并且清除定時器
3.在 onReady 中調(diào)用這個定時器方法
data: {? ? ? txt: "正在匹配中...", ? ? count: 0,//計數(shù)器,初始值為0 ? ? maxCount: 100, // 繪制一個圓環(huán)所需的步驟? ? ? countTimer: null,//定時器,初始值為null ? }, ? ?countInterval: function () { ? ? // 設(shè)置倒計時 定時器 假設(shè)每隔100毫秒 count遞增+1,當(dāng) count遞增到兩倍maxCount的時候剛好是一個圓環(huán)( step 從0到2為一周),然后改變txt值并且清除定時器 ? ? this.countTimer = setInterval(() => { ?? ? ? ? if (this.data.count <= 2 * this.data.maxCount) { ? ? ? ? ? ? ? ? // 繪制彩色圓環(huá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() ? },
最終效果
再次使用自定義組件做倒計時
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)倒計時*/ .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è)置倒計時 定時器 ? ? 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)進度條 ? ? ? ? if ((/(^[1-9]\d*$)/.test(this.data.num / 10))) { ? ? ? ? ? this.setData({ // 當(dāng)時間為整數(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() // 重新開啟倒計時 ? ? this._runEvent() // 觸發(fā)自定義組件事件 ? }, ? …… })
最終效果
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Java與JavaScript中判斷兩字符串是否相等的區(qū)別
這篇文章主要介紹了Java與JavaScript中判斷兩字符串是否相等的區(qū)別,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法
這篇文章主要介紹了JavaScript觀察者模式(publish/subscribe)原理與實現(xiàn)方法,簡單分析了javascript觀察者模式的原理、功能并結(jié)合實例形式給出了觀察者模式的實現(xiàn)技巧,需要的朋友可以參考下2017-03-03JavaScript使用setInterval()函數(shù)實現(xiàn)簡單輪詢操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實現(xiàn)簡單輪詢操作的方法,以實例形式分析了輪詢操作的原理與javascript實現(xiàn)技巧,需要的朋友可以參考下2015-02-02使用bootstrap實現(xiàn)下拉框搜索功能的實例講解
今天小編就為大家分享一篇使用bootstrap實現(xiàn)下拉框搜索功能的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08layui結(jié)合form,table的全選、反選v1.0示例講解
今天小編就為大家分享一篇layui結(jié)合form,table的全選、反選v1.0示例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08