热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序怎么实现圆心进度条

这篇文章主要介绍“微信小程序怎么实现圆心进度条”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微

这篇文章主要介绍“微信小程序怎么实现圆心进度条”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序怎么实现圆心进度条”文章能帮助大家解决问题。

一、创建项目结构

打开微信开发者工具创建一个项目, 新建 与 pages 同级目录 components,在 components 中新建一个目录 circle ,circle 中新建 Component 命名为 circle,此时将自动生成 json、wxml、wxss、js 4 个文件。结构如下:

微信小程序怎么实现圆心进度条

二、编写组件

首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true,可将这一组文件设为自定义组件)。

{
"component": true
}

同时,还要在 wxml 文件中编写组件模版,在 wxss 文件中加入组件样式,这里编写圆环进度条的模板和样式,参见微信小程序之圆形进度条。

要注意 canvas 绘制的是 px 为单位的,所以这里统一用 px 单位;其中 size 是根据 canvas 绘制的圆环的直径,后面在 js 中会提到。

在组件的 wxml 中可以包含 slot 节点,用于承载组件使用者提供的 wxml 结构。


           
           
           

注意:在组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。

/* components/circle/circle.wxss */
.circle_box,.circle_draw{ position: relative; }
.circle_bg{position: absolute;}

编写 js

在自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的。更多细节参考 Component 构造器。

/* components/circle/circle.js */
Component({
  ……
  methods: {
    /* id : canvas 组件的唯一标识符 canvas-id ,x : canvas 绘制圆形的半径, w : canvas 绘制圆环的宽度  */
    drawCircleBg: function (id, x, w) {
      // 设置圆环外面盒子大小 宽高都等于圆环直径
      this.setData({
        size: 2 * x
      });
      // 使用 wx.createContext 获取绘图上下文 ctx  绘制背景圆环
      var ctx = wx.createCanvasContext(id)
      ctx.setLineWidth(w / 2); ctx.setStrokeStyle('#20183b'); ctx.setLineCap('round')
      ctx.beginPath();//开始一个新的路径
      //设置一个原点(x,y),半径为r的圆的路径到当前路径 此处x=y=r
      ctx.arc(x, x, x - w, 0, 2 * Math.PI, false);
      ctx.stroke();//对当前路径进行描边
      ctx.draw();
    },
    drawCircle: function (id, x, w, step) {
      // 使用 wx.createContext 获取绘图上下文 context  绘制彩色进度条圆环
      var context = wx.createCanvasContext(id);
      // 设置渐变
      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();//对当前路径进行描边
      context.draw()
    },
    _runEvent() {
      //触发自定义组件事件
      this.triggerEvent("runEvent")
    }
  },
  ……
})

自定义组件圆形进度条到此已经完成。

使用自定义组件

下面我们在 index 中使用自定义组件圆形进度条。

一、json 文件中进行引用声明

使用已注册的自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

{
  "usingComponents": {
    "circle": "/components/circle/circle"
  }
}

二、wxml 文件中使用自定义组件

这样,在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

  • 节点名即自定义组件的标签名:circle;

  • 节点属性即传递给组件的属性值:bg,draw;

  • 当自定义组件触发 runEvent 事件时,调用_runEvent 方法。


    
        
        
             
              {{txt}} 
       
    

自定义组件的 wxml 节点结构在与数据结合之后,将被插入到引用位置内。在 wxss 给 slot 位置上的内容添加一些样式。

/**index.wxss**/
/*圆环进度条文字*/
.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 文件中调用自定义组件中的方法

在 wxml 中我们用到一个数据 {{txt}},我们需要在 js 中设置一下 data,然后在 onReady 中使用 selectComponent 选择组件实例节点。

//index.js
 data: { 
    txt: "正在匹配中..." 
  },
 onReady: function () {
   // 获得circle组件
    this.circle = this.selectComponent("#circle1");
    // 绘制背景圆环
    this.circle.drawCircleBg('circle_bg1', 100, 8)
    // 绘制彩色圆环 
    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);

微信小程序怎么实现圆心进度条

接下来要写定时器方法了,在定时器中每隔一段时间调用一次 this.circle.drawCircle(id, x, w, step),通过改变 step 的值来动态绘制圆环。

1.在 data 中设置几个初始值
2.定义一个定时器方法 countInterval,假设每隔 100 毫秒 count 递增
+1,当 count 递增到 100 的时候刚好是一个圆环,然后改变 txt 值并且清除定时器
3.在 onReady 中调用这个定时器方法

data: { 
    txt: "正在匹配中...",
    count: 0,//计数器,初始值为0
    maxCount: 100, // 绘制一个圆环所需的步骤 
    countTimer: null,//定时器,初始值为null
  },
   countInterval: function () {
    // 设置倒计时 定时器 假设每隔100毫秒 count递增+1,当 count递增到两倍maxCount的时候刚好是一个圆环( step 从0到2为一周),然后改变txt值并且清除定时器
    this.countTimer = setInterval(() => {   
      if (this.data.count <= 2 * this.data.maxCount) {        
        // 绘制彩色圆环进度条
        this.circle.drawCircle(&#39;circle_draw1&#39;, 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");
    // 绘制背景圆环
    this.circle.drawCircleBg(&#39;circle_bg1&#39;, 100, 8)
    // 绘制彩色圆环 
    // this.circle.drawCircle(&#39;circle_draw1&#39;, 100, 8, 2);  
    this.countInterval()
  },

最终效果

微信小程序怎么实现圆心进度条

再次使用自定义组件做倒计时

count 可以递增,当然可以递减。这里就不在赘述,直接上代码:

wxml


  
   {{time}} s

wxss

/*圆环倒计时*/
.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  // 设置倒计时 定时器
    this.stepTimer = setInterval(() => {
      if (this.data.num >= 0) {
        this.data.step = this.data.num / n;
        this.circle.drawCircle(&#39;circle_draw&#39;, 40, 4, this.data.step)// 绘制彩色圆环进度条
        if ((/(^[1-9]\d*$)/.test(this.data.num / 10))) {
          this.setData({ // 当时间为整数秒的时候 改变时间
            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() // 触发自定义组件事件
  },
  ……
})

最终效果

微信小程序怎么实现圆心进度条

关于“微信小程序怎么实现圆心进度条”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程笔记行业资讯频道,小编每天都会为大家更新不同的知识点。


推荐阅读
  • 如何撰写适应变化的高效代码:策略与实践
    编写高质量且适应变化的代码是每位程序员的追求。优质代码的关键在于其可维护性和可扩展性。本文将从面向对象编程的角度出发,探讨实现这一目标的具体策略与实践方法,帮助开发者提升代码效率和灵活性。 ... [详细]
  • 全面解析JavaScript代码注释技巧与标准规范
    在Web前端开发中,JavaScript代码的可读性和维护性至关重要。本文将详细介绍如何有效地使用注释来提高代码的可读性,并探讨JavaScript代码注释的最佳实践和标准规范。通过合理的注释,开发者可以更好地理解和维护复杂的代码逻辑,提升团队协作效率。 ... [详细]
  • MATLAB字典学习工具箱SPAMS:稀疏与字典学习的详细介绍、配置及应用实例
    SPAMS(Sparse Modeling Software)是一个强大的开源优化工具箱,专为解决多种稀疏估计问题而设计。该工具箱基于MATLAB,提供了丰富的算法和函数,适用于字典学习、信号处理和机器学习等领域。本文将详细介绍SPAMS的配置方法、核心功能及其在实际应用中的典型案例,帮助用户更好地理解和使用这一工具箱。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 在使用 Qt 进行 YUV420 图像渲染时,由于 Qt 本身不支持直接绘制 YUV 数据,因此需要借助 QOpenGLWidget 和 OpenGL 技术来实现。通过继承 QOpenGLWidget 类并重写其绘图方法,可以利用 GPU 的高效渲染能力,实现高质量的 YUV420 图像显示。此外,这种方法还能显著提高图像处理的性能和流畅性。 ... [详细]
  • 如何撰写初级和高级前端开发者的专业简历
    如何撰写初级和高级前端开发者的专业简历 ... [详细]
  • 第六章:枚举类型与switch结构的应用分析
    第六章深入探讨了枚举类型与 `switch` 结构在编程中的应用。枚举类型(`enum`)是一种将一组相关常量组织在一起的数据类型,广泛存在于多种编程语言中。例如,在 Cocoa 框架中,处理文本对齐时常用 `NSTextAlignment` 枚举来表示不同的对齐方式。通过结合 `switch` 结构,可以更清晰、高效地实现基于枚举值的逻辑分支,提高代码的可读性和维护性。 ... [详细]
  • 如何在系统设置中找到高级配置选项 ... [详细]
  • 通过使用CIFAR-10数据集,本文详细介绍了如何快速掌握Mixup数据增强技术,并展示了该方法在图像分类任务中的显著效果。实验结果表明,Mixup能够有效提高模型的泛化能力和分类精度,为图像识别领域的研究提供了有价值的参考。 ... [详细]
  • 开发笔记:深入解析Android自定义控件——Button的72种变形技巧
    开发笔记:深入解析Android自定义控件——Button的72种变形技巧 ... [详细]
  • 脑机接口技术在物联网行业中的应用与前景分析
    近期,国际研究人员开发了一种轻便的脑电图(EEG)采集与信号处理系统,并在物联网领域进行了初步应用研究。该系统配备了8个可扩展的采集电极和1个参考电极,具备高灵敏度的放大功能,能够有效捕捉和处理脑电信号。通过与物联网技术的结合,该系统有望在智能家居、健康监测和人机交互等领域发挥重要作用,展现出广阔的应用前景。 ... [详细]
  • 提升Android开发效率:Clean Code的最佳实践与应用
    在Android开发中,提高代码质量和开发效率是至关重要的。本文介绍了如何通过Clean Code的最佳实践来优化Android应用的开发流程。以SQLite数据库操作为例,详细探讨了如何编写高效、可维护的SQL查询语句,并将其结果封装为Java对象。通过遵循这些最佳实践,开发者可以显著提升代码的可读性和可维护性,从而加快开发速度并减少错误。 ... [详细]
  • 尽管我们尽最大努力,任何软件开发过程中都难免会出现缺陷。为了更有效地提升对支持部门的协助与支撑,本文探讨了多种策略和最佳实践,旨在通过改进沟通、增强培训和支持流程来减少这些缺陷的影响,并提高整体服务质量和客户满意度。 ... [详细]
  • MySQL数据库安装图文教程
    本文详细介绍了MySQL数据库的安装步骤。首先,用户需要打开已下载的MySQL安装文件,例如 `mysql-5.5.40-win32.msi`,并双击运行。接下来,在安装向导中选择安装类型,通常推荐选择“典型”安装选项,以确保大多数常用功能都能被正确安装。此外,文章还提供了详细的图文说明,帮助用户顺利完成整个安装过程,确保数据库系统能够稳定运行。 ... [详细]
  • 在HTML5应用中,Accordion(手风琴,又称抽屉)效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果,通过层次结构优化信息展示和页面布局,提升用户体验。这些效果不仅增强了视觉效果,还提高了内容的可访问性和互动性。 ... [详细]
author-avatar
赵美晓
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有