search
HomeWeChat AppletMini Program DevelopmentWeChat applet implements circular progress bar example sharing

This article mainly shares with you an example of implementing a circular progress bar in a WeChat applet. I hope it can help you.

Use circular countdown in the applet, rendering:
WeChat applet implements circular progress bar example sharing

Ideas

  1. Use 2 There are two canvases, one is the background ring and the other is the color ring.

  2. Use setInterval to let the colored rings draw gradually.

Solution

The first step is to write the structure

A box wraps 2 canvases and text boxes;
The box uses relative positioning as Parent, flex layout, set to center;
One canvas, use absolute positioning as the background, canvas-id="canvasProgressbg"
Another canvas, use relative positioning as the progress bar, canvas-id="canvasProgress"
The code is as follows:

// wxml
 <view>
     <view>
        <canvas>  </canvas> 
        <canvas>  </canvas> 
        <view>
            <view></view> 
            <text> {{progress_txt}}</text>
        </view>     
    </view>
</view>
// wxss
.progress_box{
  position: relative;
  width:220px;
  height: 220px;  
// 这里的宽高是必须大于等于canvas圆环的直径 否则绘制到盒子外面就看不见了
// 一开始设置 width:440rpx; height:440rpx; 发现 在360X640分辨率的设备,下绘制的圆环跑盒子外去了
// 小程序使用rpx单位适配 ,但是canvas绘制的是px单位的。所以只能用px单位绘制的圆环在盒子内显示
  display: flex;  
  align-items: center;
  justify-content: center;
  background-color: #eee;
}
.progress_bg{
  position: absolute;
    width:220px;
  height: 220px; 
}
.progress_canvas{ 
  width:220px;
  height: 220px; 
} 
.progress_text{ 
  position: absolute; 
  display: flex;  
  align-items: center;
  justify-content: center
}
.progress_info{   
  font-size: 36rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx
} 
.progress_dot{
  width:16rpx;
  height: 16rpx;  
  border-radius: 50%;
  background-color: #fb9126;
}

Second step data binding

You can see from wxml that we use a data progress_txt, so set the data in js as follows:

 data: {
    progress_txt: '正在匹配中...',  
  },

The third step canvas drawing

Knock on the blackboard and draw the key points

1. First draw the background

  1. in js Encapsulate a function drawProgressbg that draws a circle, draw a circle on canvas

  2. Execute this function in onReady;

The small program canvas component and H5 The canvas is a little different, please check the document, the code is as follows

drawProgressbg: function(){
    // 使用 wx.createContext 获取绘图上下文 context
    var ctx = wx.createCanvasContext('canvasProgressbg')
    ctx.setLineWidth(4);// 设置圆环的宽度
    ctx.setStrokeStyle('#20183b'); // 设置圆环的颜色
    ctx.setLineCap('round') // 设置圆环端点的形状
    ctx.beginPath();//开始一个新的路径
    ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
    //设置一个原点(100,100),半径为90的圆的路径到当前路径
    ctx.stroke();//对当前路径进行描边
    ctx.draw();
  },
 onReady: function () {
    this.drawProgressbg(); 
  },

The effect is as follows:
WeChat applet implements circular progress bar example sharing

2. Draw a colored ring

  1. Encapsulate a function drawCircle that draws a circle in js,

  2. Execute this function in onReady;

  drawCircle: function (step){  
    var context = wx.createCanvasContext('canvasProgress');
      // 设置渐变
      var gradient = context.createLinearGradient(200, 100, 100, 200);
      gradient.addColorStop("0", "#2661DD");
      gradient.addColorStop("0.5", "#40ED94");
      gradient.addColorStop("1.0", "#5956CC");
      
      context.setLineWidth(10);
      context.setStrokeStyle(gradient);
      context.setLineCap('round')
      context.beginPath(); 
      // 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
      context.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
      context.stroke(); 
      context.draw() 
  },
 onReady: function () {
     this.drawProgressbg(); 
     this.drawCircle(2) 
  },
this.drawCircle(0.5) The effect is as follows: this.drawCircle(1) The effect is as follows: this.drawCircle(2) The effect is as follows:
WeChat applet implements circular progress bar example sharing WeChat applet implements circular progress bar example sharing WeChat applet implements circular progress bar example sharing
#3. Set a timer

  1. Set a counter count, a step, and a timer in the data in js

  2. Encapsulate a timer function countInterval in js,

  3. Execute this function in onReady;

  4.   data: {
        progress_txt: '正在匹配中...',  
        count:0, // 设置 计数器 初始为0
        countTimer: null // 设置 定时器 初始为null
      },
        countInterval: function () {
        // 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
        this.countTimer = setInterval(() => {
          if (this.data.count 
Final effect


WeChat applet implements circular progress bar example sharing##Related recommendations:

Examples to explain the implementation of circular progress bar animation on canvas

Introduction to the method of realizing circular progress bar in WeChat applet

Recommended basic introductory tutorials on circular progress bar


The above is the detailed content of WeChat applet implements circular progress bar example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software