微信小程序进度条样式_详解微信小程序—

微信小程序自定义圆形进度条，具体如下：

无图无真相，先上图：

实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。

代码实现：

JS代码：

页面初始化 options为页面跳转所带来的参数

},onReady: function () {

// 页面渲染完成

var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。

cxt_arc.setLineWidth(6);

cxt_arc.setStrokeStyle('#d2d2d2');

cxt_arc.setLineCap('round')

cxt_arc.beginPath();//开始一个新的路径

cxt_arc.arc(106,106,100,2*Math.PI,false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径

cxt_arc.stroke();//对当前路径进行描边

cxt_arc.setLineWidth(6);

cxt_arc.setStrokeStyle('#3ea6ff');

cxt_arc.setLineCap('round')

cxt_arc.beginPath();//开始一个新的路径

cxt_arc.arc(106,-Math.PI 1 / 2,Math.PI6/5,false);

cxt_arc.stroke();//对当前路径进行描边

cxt_arc.draw();

},onShow: function () {

// 页面显示

},onHide: function () {

// 页面隐藏

},onUnload: function () {

// 页面关闭

}

})

页面布局：

中间

CSS样式：

}

.top{

text-align: center

}

.cc{

margin-top: -120px;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250

微信小程序进度条样式_详解微信小程序——自定义圆形进度条相关推荐

用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...
本地缓存需要高时效性怎么办_详解微信小程序缓存--缓存时效性
关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearS ...
java用redis缓存的步骤_详解在Java程序中运用Redis缓存对象的方法|chu
这段时间一直有人问如何在Redis中缓存Java中的List 集合数据,其实很简单,常用的方式有两种: 1. 利用序列化,把对象序列化成二进制格式,Redis 提供了相关API方法存储二进制,取数据 ...
canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
微信小程序foreach遍历_详解微信小程序循环及嵌套循环
本文主要介绍微信小程序循环及嵌套循环的使用总结的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家. 对于我们在js中从接口中通过POST或GET请求获取数据存放到Page中 ...
微信小程序渲染层网络错误_详解微信小程序「渲染层网络层错误」的解决方法...
问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需 ...
微信小程序文本组件text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: <text >测试使用</text> 1 基 ...
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? 将图标加入购物车搜索关键词可以是中文也可 ...
微信小程序富文本rich-text使用详解-微信小程序系统学习攻略
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好. 在微信小程序开发中,rich-text 标签可以用来显示富文本 html内容,可以渲染部分html标签,全局支持class和style ...

微信小程序进度条样式_详解微信小程序——自定义圆形进度条

微信小程序进度条样式_详解微信小程序——自定义圆形进度条相关推荐

最新文章

热门文章