欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解微信小程序——自定義圓形進(jìn)度條

 更新時(shí)間：2016年12月29日 11:31:53   作者：wlvoid  
這篇文章主要介紹了詳解微信小程序——自定義圓形進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

微信小程序 自定義圓形進(jìn)度條，具體如下：

無圖無真相，先上圖：

實(shí)現(xiàn)思路，先繪制底層的灰色圓圈背景，再繪制上層的藍(lán)色進(jìn)度條。

代碼實(shí)現(xiàn)：

JS代碼：

Page({ 
 data: {}, 
 onLoad: function (options) { 
  // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來的參數(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();//開始一個(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();//開始一個(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; 
  
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 深入解析微信小程序開發(fā)中遇到的幾個(gè)小問題

    深入解析微信小程序開發(fā)中遇到的幾個(gè)小問題

    這篇文章主要介紹了微信小程序開發(fā)中遇到的幾個(gè)小問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-07-07
  • uni-app?web-view的使用示例詳解

    uni-app?web-view的使用示例詳解

    這篇文章主要介紹了uni-app web-view的使用，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼

    elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)d的示例代碼

    這篇文章主要介紹了elementui更改el-dialog關(guān)閉按鈕的圖標(biāo)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08
  • javascript中數(shù)組的常用算法深入分析

    javascript中數(shù)組的常用算法深入分析

    這篇文章主要給大家介紹了關(guān)于javascript中數(shù)組的常用算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • JS call()及apply()方法使用實(shí)例匯總

    JS call()及apply()方法使用實(shí)例匯總

    這篇文章主要介紹了JS call()及apply()方法使用實(shí)例匯總,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-07-07
  • 使用微信小程序API，調(diào)用微信的各種內(nèi)置能力。

    使用微信小程序API，調(diào)用微信的各種內(nèi)置能力。

    微信小程序如何使用小程序API，去調(diào)用微信提供的各種內(nèi)置能力（即微信API）。小程序開發(fā)框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲(chǔ)，支付功能等。
    2022-12-12
  • JavaScript Alert通用美化類

    JavaScript Alert通用美化類

    只有msg是必須的，后面的參數(shù)可以省略。如果中間的參數(shù)為空則在對(duì)應(yīng)位置上''或者""表示（根據(jù)實(shí)際情況選擇單雙引號(hào)） 調(diào)用此方法須在每個(gè)使用的頁(yè)面的head區(qū)域加入下面代碼。
    2009-11-11
  • javascript日期對(duì)象格式化為字符串的實(shí)現(xiàn)方法

    javascript日期對(duì)象格式化為字符串的實(shí)現(xiàn)方法

    本篇文章主要是對(duì)javascript日期對(duì)象格式化為字符串的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
    2014-01-01
  • clipboard.js在移動(dòng)端復(fù)制失敗的解決方法

    clipboard.js在移動(dòng)端復(fù)制失敗的解決方法

    最近在使用clipboard.js碰到的一個(gè)小問題，通過查找相關(guān)資料解決了，所以下面這篇文章主要給大家介紹了關(guān)于clipboard.js在移動(dòng)端復(fù)制失敗的解決方法，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-06-06
  • JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享

    JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)計(jì)算數(shù)字步數(shù)的算法分享,本文先是講解了算法描述與實(shí)現(xiàn)原理,然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2014-12-12

最新評(píng)論