微信小程序使用技能 - 圆环进度条

{app.params.name}}{app.params.name}}{app.params.name}}

圆环进度条的实现,估计在很多应用中都有需要的地方,但是真要自己实现的时候,还是有点棘手的,不过通过资料搜索,自己写了一个
现在记录下,供大家参考使用

<view style="width:429rpx;height:429rpx;position:relative;border-radius:50%;border:14rpx solid #eaeaea;">
	<view style="width:457rpx;height:457rpx;position:absolute;left:-14rpx;top:-14rpx;border:0;">
	   
	  <view style="width:228.5rpx;height:457rpx;overflow:hidden;display:inline-block;position:relative;">
	    <view style="width:429rpx;height:429rpx;border:14rpx solid transparent;border-radius:50%;position:absolute;top:0;border-bottom:14rpx solid green;border-left:14rpx solid green;left:0rpx;transform :rotate({{leftDeg}}deg)"></view>
	  </view>

	  <view style="width:228.5rpx;height:457rpx;overflow:hidden;display:inline-block;position:relative;">
	    <view style="width:429rpx;height:429rpx;border:14rpx solid transparent;border-radius:50%;position:absolute;top:0;border-top:14rpx solid green;border-right:14rpx solid green;right:0rpx;transform :rotate({{rightDeg}}deg)"></view>
	  </view>

	</view>
</view>


数值解释:

429 - 矩形的实际宽度和高度值
457 - 矩形的使用宽度和高度值,加上了矩形的边框值,记住是上下两个边的,所以乘以2 - 429 + (2 * 14)
228.5 - 矩形的使用宽度值一半 457 / 2
14 - 矩形的边的宽度值

 

这些值可以根据自己的实际使用进行替换

这里比较关键的是如果计算这个角度的问题,网上看了很多的教程,也没有太理解,经过自己的摸索,写了一个函数,只要调用传值就好了。函数如下

function updateCircleDeg(percent) {
  // const percent = 60; // 百分比值
  let rightDeg = 45; // 默认值 - 可以根据需求进行修改
  let leftDeg = 45; // 默认值 - 可以根据需求进行修改

  if (percent < 50) {
    rightDeg = -135 - 180 * ((50 - percent)/50);
  } else if (percent >= 50 && percent <= 100) {
    rightDeg = -135
    leftDeg = -135 - 180 * ((percent) / -50);
  }

  this.setData({
    leftDeg,
    rightDeg,
  });
},

上面的公式很简单,也许有更简单的,一般一个进度条是满格的情况是100%,于是我用100作为参考值,因为这个进度条是分为左边一半,右边一半,所以100被分成了50,其实这个50是左边一个50,右边一个50。我们知道一个圆是360度,一半的话就是180度,于是就有了180的取值,然后180是度数值,50是我们的百分比值,根据需要展示的百分比就能换算出对应的度数了,于是就有了这个公式。应该还好理解。

同理这个50跟100 也可以算成类比其他之类的东东,可以改造为自己需要的
这里的-135是干嘛的,我也不知道,我知道这个是个参考点,当为-135的时候就是左半边跟右半边吻合的时候,有时候不需要了解这个值,你较真你去了解吧。OK

当然也可以做成动画效果。通过下面的方式执行上面的函数就可以了

const percent = 20; // 百分比值
let timer = .1; // 时间刻度值
const time = (50 - percent) / 50 * 1; // 1 表示基础时间值

const intervalTimer = setInterval(() => {
  this.updateCircleDeg(timer);
  
  if (percent <= timer) {
    clearInterval(intervalTimer);
  }

  console.log(timer);

  timer = parseFloat(parseFloat(timer + .1).toFixed(1));
}, time);

 

版权声明

durban创作并维护的 小绒毛的足迹博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 博客( https://www.xiaorongmao.com ),版权所有,侵权必究。

本文永久链接: https://www.xiaorongmao.com/blog/124


版权声明

durban创作并维护的 小绒毛的足迹博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 小绒毛的足迹博客( https://www.xiaorongmao.com ),版权所有,侵权必究。

本文永久链接: https://www.xiaorongmao.com/blog/124