Creating a custom circular progress bar for WeChat applets

This article mainly introduces the detailed explanation of the small program-the custom circular progress bar, which has a certain reference value. The implementation idea is to first draw the gray circle background at the bottom layer, and then draw the blue progress bar at the upper layer. This article mainly introduces the detailed explanation of the small program-the custom circular progress bar, which has a certain reference value. The implementation idea is to first draw the gray circle background at the bottom layer, and then draw the blue progress bar at the upper layer.

JS code:

Page ({data :{}, onLoad: function (options) {// parameters brought about by Page initialization options for Page jump}, onReady: function () {// page rendering completed var cxt_arc = wx. createCanvasContext ('canvasarc'); // Create and return the drawing context object. Cxt_arc.setLineWidth (6); evaluate ('# d2d2d2'); cxt_arc.setLineCap ('round ') cxt_arc.beginPath (); // start a new path cxt_arc.arc (106,106,100, 0, 2 * Math. PI, false); // set the path of a circle with a radius of 106,106 to the current path cxt_arc.stroke (); // stroke the current path cxt_arc.setLineWidth (6); cxt_arc.setStrokeStyle ('# 3ea6ff'); cxt_arc.setLineCap ('round') cxt_arc.beginPath (); // start a new path named cxt_arc.arc (106,106,100,-Math. PI * 1/2, Math. PI * 6/5, false); cxt_arc.stroke (); // stroke the current path cxt_arc.draw () ;}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closing }})

Page layout:

  
    
     
       
   
    
Intermediate
      
  
 

CSS style:

.cir{ display: inline-block; margin-top: 20rpx;  }  .top{ text-align: center}  .cc{    margin-top: -120px;   }

The above is the details of creating a custom circular progress bar for small programs. For more information, see other related articles in the first PHP community!