微信小程序半圆进度条（可拖动）

最新推荐文章于 2024-07-17 09:43:10 发布
最新推荐文章于 2024-07-17 09:43:10 发布
阅读量2k 收藏 4
点赞数 5
分类专栏： 微信小程序 个人教程 文章标签： html 小程序 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gsrkuang/article/details/120506826
版权

好啦，重点，重点，先放效果图，有需要的开发者可以继续往下看。

上面是带背景条的，在代码里面可以注释掉，下面是不带背景条的。

 

 诶，研究了好几天，项目是从其他的开源项目里改来的，因为实在找不到半圆形还带拖动的进度条了索性改一个，但是UP主最近缺少CSDN积分啊.各位大佬们需要的就拿去把，我把项目传到CSDN上，自行下载就好

halfprogress.rar-Javascript文档类资源-CSDN下载

-Colin
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
微信小程序圆环进度条
有个派大星的博客
11-29 2011
先来看一下效果图 微信小程序里面用canvas画圆心进度条 页面给容器 <view class='weui'> <canvas class='oneCan' canvas-id='one' ></canvas> <canvas class='oneCan' canvas-id='two' ></canvas> </vie...
小程序之单品半圆滑动
HuYiMin1998的博客
03-11 453
axml <!--单品半圆滑动 --> <view style="position:relative;display:flex;justify-content:center;width:714rpx;margin:0 auto;height:{{moduleHeight}}rpx;background-color:{{moduleBgColor}}"> <!-- 底层滑动 --> <view style="width:714;height:{{moduleH
微信小程序自定义半圆拖动条
liweipei_gd的博客
03-12 1368
目录wxml界面配置JS部分代码 此代码适用于微信SDKVersion"2.9.0 "或以上，以制作半圆形拖动条为例，制作简单的自定义组件的方法流程： wxml界面配置 在页面里放置一个画布组件 <canvas style="width:300rpx;height:300rpx;position:absolute;left:50rpx;text-align: center;line-height: 300rpx;" canvas-id="myCanvas" type="
微信小程序绘制半圆（弧形）进度条
01-22
本文实例为大家分享了微信小程序绘制半圆进度条的具体代码，供大家参考，具体内容如下 wxml： <view class=progress> <canvas canvas-id=canvasProgress xss=removed></canvas> </view> <view class=progress> <canvas canvas-id=canvasProgressReal style=width: {{canvasWidth}}rpx; height
微信小程序—半圆（弧形）进度条
liumengyue的博客
05-06 2856
效果图： <canvas class="canvas" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" canvas-id="circleBar"></canvas> data: { canvasWidth: 213, // 画布宽度 canvasHeight: 187, // 画布高度 value:60 , // 当前得分 total:100, // 总分值 },
微信小程序实现滑动操作
King博客
04-22 5866
前言 本文使用动画组件wx.createAnimation来实现滑动操作： 1. 左滑动显示操作项； 2. 点击操作项触发相应方法； 3. 右滑动和点击行收起操作项； 4. 点击“取消”收起操作项。 最终效果如下： 实现过程 1. 文件index.wxml和index.wxss代码如下，这一块比较简单，可自行查看，不做过多分析： <view class="wra...
小程序canvas，可滑动圆形转盘(进度条)
东东东东东辉
12-05 1994
有个小程序项目，需要通过转盘的形式，进行数据录入，找了好久，终于找到。 看图 刻度盘进度盘.gif 进度条刻度盘.gif 组件自定义属性 /** * 组件的初始数据 */ properties: { startAngle:{ type:Number, value: -Math.PI / 2, // 起始角度 }, lastAn...
微信小程序圆形进度条倒计时效果
沫沫酱
02-22 6367
效果如下图：var initNum = 7; //倒计时数var spaceNum = 1000; //文字倒计时间隔var space =1000; //环倒计时间隔一、封装canvas画圆环 begin: - (1 / 2 * Math.PI), pai2: 2 * Math.PI, //canvas画圆环 drawRang: function (precent) { var w...
详解微信小程序——自定义圆形进度条
01-03
微信小程序 自定义圆形进度条，具体如下： 无图无真相，先上图： 实现思路，先绘制底层的灰色圆圈背景，再绘制上层的蓝色进度条。 代码实现： JS代码： Page({ data: {}, onLoad: function (options) { // ...
微信小程序可拖动半圆进度条
06-22
本项目“微信小程序可拖动半圆进度条”是基于微信小程序原生开发的一个小示例，它展示了一种交互式的、可以手动拖动的半圆形进度条，用于实时显示和更新进度值。 在微信小程序中，实现这个功能需要掌握以下几个关键...
微信小程序实现时间进度条功能
10-15
在微信小程序中实现时间进度条功能，主要是为了在答题类或游戏环节中提供一个可视化的计时工具，让用户能够清楚地看到剩余的时间。这个功能通过结合HTML、CSS和JavaScript（在微信小程序中是WXML、WXSS和JS）来完成...
微信小程序之滑块效果、slider用法
夜阑珊妖妖
06-17 3344
效果图： <!-- 资金情况 --> <view class="selconbox"> <view class="seltit">购买力</view> <view class="progressbox"> <view class="zijintit" wx:if="{{price == 0}}">未知</view> <view cl
微信小程序+vant Weapp Slider 滑块实现滑动拖动计数器
LeeBrook0的博客
03-21 2490
介绍微信小程序结合vant Weapp框架中Slider组件实现滑块滑动拖动计数器的功能
微信小程序——滑动条
qq_57985179的博客
09-13 5333
一、微信自带的进度条——slider组件 <slider bindchanging="sliderChanging" show-value> 当slider组件被拖动时，会执行silderChanging事件处理函数,通过不断打印函数的e.detail.value，可以看出函数执行时输出的信息。 sliderChanging:function(e){ console.log(e.detail.value) } 所以，我们可以将音乐、视频、下载文件的进度转化为上
vant 半圆仪表盘_微信小程序之圆形进度条（自定义组件）
weixin_39974400的博客
12-20 1894
思路使用2个canvas一个是背景圆环，一个是彩色圆环。使用setInterval让彩色圆环逐步绘制。在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的.它们的缺点为:1.组件必须用js实例化 (如果我有一个任务列表,后面会显示每个任务的进度,每个任务都必须实例化)2.它们js实例化时,绘图是用 px绘制,导致页面用rpx布局,组件却用px绘制.修改后的组件在compone...
【微信原生小程序】手写双向slider滑块
weixin_43951592的博客
04-04 2022
官方自带的以及vant weapp组件都是只有单向的slider双向的slider，网上抄了几篇文章，代码量巨大而且还有各种bug，相当难用，chatGPT写的也没法用，没办法，只能自己手写一个了。
微信小程序漂亮按钮（中间矩形两端半圆形）
qq_42777577的博客
06-04 6251
.wxss width:400rpx; height: 100rpx; border-radius: 100rpx; background-color: pink; color: white; line-height: 100rpx; text-align: center;
HTML2048小游戏（最新版）
最新发布
w11111xxxl的博客
07-17 403
比上一篇文章的2048小游戏更好一点。
微信小程序设置进度条数据
07-25
在微信小程序中，你可以使用 `progress` 组件来设置进度条的数据。以下是示例代码： ```html <progress percent="{{50}}" show-info stroke-width="{{12}}" /> ``` 在上述代码中，我们使用了 `progress` 组件来显示一个进度条。通过设置组件的属性，可以进行进度条数据的设置： - `percent` 属性用于设置进度条的百分比，取值范围为 0 到 100。在示例中，我们将进度条的百分比设置为 50。 - `show-info` 属性用于显示进度条上方的百分比文本信息。设置为 `true` 表示显示，默认为 `false`。 - `stroke-width` 属性用于设置进度条的宽度，默认值为 6。在示例中，我们将进度条的宽度设置为 12。 根据你的需求，你可以根据实际情况设置 `percent`、`show-info` 和 `stroke-width` 等属性的值，以实现自定义的进度条效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值