【微信小程序】圆环进度条

这篇具有很好参考价值的文章主要介绍了【微信小程序】圆环进度条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、需求分析

① 生成用于倒计时的圆环,通过代码来控制圆环的倒计时进度。要做到重新进页面,圆环不会重新归零。
② 圆环中间会有倒计时
③ 倒计时的时间可以自定义

二、实现效果

【微信小程序】圆环进度条,微信小程序,微信小程序,javascript,小程序

三、实现过程

index.wxml 部分,使用 canvas 绘制两个圆环。以及显示中间的倒计时

   
    <view class="loading-warp">
      <canvas class="canvas" canvas-id="canvasCircle"></canvas>
      <canvas class="canvas-mask" canvas-id="canvasRing"></canvas>
      <view class="rate" wx:if="{{tem==1}}">{{hours}}{{minute}}</view>
      <view class="rate" wx:if="{{tem==0}}">{{minute}}{{second}}</view>
      <view class="rate" wx:if="{{tem==-1}}">00</view>
    </view>
    

index.js 里,先绘制白色圆环

    let cxt = wx.createCanvasContext('canvasCircle');
    cxt.setLineWidth(3);
    cxt.setStrokeStyle('#ffffff'); //白色圆环
    cxt.setLineCap('round');
    cxt.beginPath();
    cxt.arc(30, 30, 28, 0, 2 * Math.PI, false);
    cxt.stroke();
    cxt.draw();

再计算出总时间、已经使用多久时间和还剩的时间。开始时间和结束时间可以自定义的


    let nowTime = new Date();//当前时间
    let startTime = "2022-11-13 11:00:00"; // 开始时间
    let endTime = "2022-11-13 12:00:00"; // 结束时间

    let ntime = nowTime.getTime(); //当前时间戳
    let stime = new Date(startTime).getTime(); //开始时间戳
    let etime = new Date(endTime).getTime(); //结束时间戳


    let allTime = (etime - stime) / 1000; // 总时间
    let alreadyTime = (ntime - stime) / 1000; // 查询已经使用多久时间
    let noUsedTime = (etime - ntime) / 1000; // 还剩的时间

计算出圆环进度条的开始位置和结束位置,以及圆环中间的时间


        timer: setInterval(function () {

          let lastEnd = alreadyTime * 2 * Math.PI / allTime; //已经走的周长

          // 已经走的 = 一直按照初始速度走的周长 + 初始位置 + 已经走过的周长
          endAngle = steps * 2 * Math.PI / allTime + startAngle + lastEnd;

          drawing(startAngle, endAngle);
          steps++;

          // 天数位
          let day = Math.floor(noUsedTime / 3600 / 24);
          let dayStr = day.toString();
          if (dayStr.length == 1) dayStr = '0' + dayStr;

          // 小时位
          let hr = Math.floor((noUsedTime - day * 3600 * 24) / 3600);
          let hrStr = hr.toString();
          if (hrStr.length == 1) hrStr = '0' + hrStr;

          // 分钟位
          let min = Math.floor((noUsedTime - day * 3600 * 24 - hr * 3600) / 60);
          let minStr = min.toString();
          if (minStr.length == 1) minStr = '0' + minStr;

          // 秒位
          let sec = noUsedTime - day * 3600 * 24 - hr * 3600 - min * 60;
          let secStr = sec.toString();
          if (secStr.length == 1) secStr = '0' + secStr;

          that.setData({
            hours: hrStr,
            minute: minStr,
            second: parseInt(secStr),
          });

          noUsedTime--;

          if (noUsedTime < 3600) { //显示分秒
            that.setData({
              tem: 0
            })
          } else if (noUsedTime >= 3600) {
            that.setData({ //显示时分
              tem: 1
            })
          }

        }, 1000)

绘制圆环倒计时


    // 绘制
    function drawing(s, e) {
      let context = wx.createCanvasContext('canvasRing');
      context.setLineWidth(3);
      context.setStrokeStyle('#FF0000'); //红色
      context.setLineCap('round');
      context.beginPath();
      context.arc(30, 30, 28, s, e, false); //s起始角 e结束位置,通过改变 steps 值确定
      context.stroke();
      context.draw();
    }

四、完整代码

csdn 上的地址:点击这里文章来源地址https://www.toymoban.com/news/detail-529653.html

到了这里,关于【微信小程序】圆环进度条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现自定义音乐播放(定时、进度条)

    实现关键: 1、wx.getBackgroundAudioManager()  2、在app.json中配置:\\\"requiredBackgroundModes\\\": [\\\"audio\\\"] 界面 具体实现步骤: ======****进度条组件 wxml wxss   js  json  ======****调用部分 wxml less   json   js 1、在onLoad中创建播放对象 2、将播放的步骤封装成一个方法 注意事项: 1、代码中的src为需

    2024年02月16日
    浏览(36)
  • 原生微信小程序,多音频播放实现进度条功能

    小程序的音频组件没有进度条的功能,业务需要,只好烧脑自己实现。 逻辑思路: 1.所有音频播放、停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚

    2024年02月11日
    浏览(59)
  • uniapp微信小程序实现大文件上传 分片上传 进度条

    一、安装   二、页面引入  三、实现功能(重要)         1.获取图片的路径         2.设置分片的大小         3.将数据放入 四、实现上传进度条 全部函数js 五、修改npm的源码,处理请求源码中请求所携带的参数问题,以及报错处理(重要) 修改npm后的源码。

    2024年02月03日
    浏览(49)
  • 基于Taro + React 实现微信小程序半圆滑块组件、半圆进度条、弧形进度条、半圆滑行轨道(附源码)

    1、四个档位 2、可点击加减切换档位 3、可以点击区域切换档位 4、可以滑动切换档位 给大家提供一些实现思路,找了一圈,一些文章基本不能直接用,错漏百出,代码还藏着掖着,希望可以帮到大家 ts的写法风格 index.tsx      index.module.less 防抖的工具函数debounce 的详细代码

    2024年02月06日
    浏览(57)
  • 微信小程序——实现音乐播放器(上下切换歌曲、进度条拉动、暂停与继续播放)

    小伙伴们你们有没有想过自己搞一个播放器,播上自己喜欢的歌单,那是多么的惬意啊~ 之前,小编遇到一个项目,语音导览的播放器。其实跟播放歌单一个道理。 但是一看微信开发文档里面的音频API又是那么多,我们该如何选择呢?在这里小编选择了使用wx.createAudioContext

    2024年02月02日
    浏览(60)
  • CSS实现圆环进度条

    CSS实现圆环进度条 一、静态进度条 首先,我们先看一个静态进度条 第一步当然是先实现一个最外层的父级圆环。 其次是通过 clip-path 画出两个半圆,并绝对定位覆盖在父级圆环。 小于50的时候,我们只需要通过旋转右半圆,慢慢透露出父级圆环的颜色,即可达到效果。 大于

    2024年02月11日
    浏览(41)
  • Android 自定义View 之 圆环进度条

      很多时候我们会使用进度条,而Android默认的进度条是长条的,从左至右。而在日常开发中,有时候UI为了让页面更美观,就需要用到圆环进度条,那么本文就是通过自定义写一个圆环进度条,首先看一下效果图:   关于自定义View的基础知识就不再做过多的讲解了,我

    2024年02月10日
    浏览(46)
  • 微信小程序实现拼团功能javascript + swiper

    实现以上的拼团功能,纯自己手写 1.js 部分自己封装的方法,需要后台返回拼团组,主要包括团长信息,团结束时间等,核心是要拼接上面的最后面的1秒只内从9减到0的倒计时,给用户一种紧迫感 startCountdown: function () { const that = this; const timer = setInterval(function () { const groups =

    2024年02月02日
    浏览(47)
  • JavaScript、微信小程序 根据汉字拼音首字母进行归类分组

    在微信小程序里面不支持这个localeCompare方法,所以有了下面的方法 我们需要一个 开源的汉字库 ,也就是码表。这个库就可以。git库 不想去git下载直接拉到最底下有js文件,直接复制就行。 然后页面引入 china.js代码

    2024年02月11日
    浏览(42)
  • uniapp - [微信小程序] 超详细实时录音功能,录制外部声音及播放上传到服务器(支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能)

    网上的教程都太乱了,功能不好用且一堆 BUG,没有注释很难改造示例为自己用。 本文实现了 uniapp 微信小程序平台,授权麦克风进行录音并保存为音频的功能,内置播放器可播放录音文件, 您直接复制组件源码,稍微改改样式就能直接应用到您的项目中去了。 如下图安卓、

    2024年02月12日
    浏览(298)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包