首页 前端知识 微信小程序实现带刻度简易仪表盘

微信小程序实现带刻度简易仪表盘

2024-06-01 10:06:53 前端知识 前端哥 534 341 我要收藏

一、需求:

实现如图样式的仪表盘,要求分数向下取整、进度精确展示。

 二、实现步骤:

1、首先画出环形进度条,通过大圆包小圆的方式实现:大圆(circle1)背景浅色,小圆(circle2)背景白色

2、在小圆内部画刻度,根据UI图确认一共有12个刻度,其中长短刻度交叉显示(如图),

定义一个长度为12的数组(emptyArray: new Array(12))遍历出12个刻度,通过判断索引奇偶分别设置长短刻度,由于仪表盘不是整个环形,就用一个白色背景的盒子盖住下面三个刻度。

刻度实现主要使用css3特性:transform-origin(transform-origin属性表示在对元素进行变换的时候,设置围绕哪个点进行变化的)结合transform: rotate(旋转),通过transform-origin控制中心点位置,计算transform: rotate(旋转)角度实现刻度的效果

3、以上已实现初步表盘的样式,重点是进度条的展示,这时候就用到了神奇的 conic-gradient 圆锥渐变

给它的一些属性根据角度大小动态赋值就能实现进度条的效果

(1)这个地方的判断是由于conic-gradient是从180deg开始的(环形最底部),截掉下半部分后需要重新定位0的位置,根据刻度的划分,0的位置在原来的位置+60,代码写61是因为有一些偏差,同理element > 4 ? element * 0.18 : element * 0.22这个判断也是为了进度条精确展示

 (2)刻度

1:定位到环形最底部是第一个刻度,每个刻度*30定位各个刻度的位置

2:长短刻度

3:头部和尾部部分的进度处理

4、中间的指针是自己画的,一个固定在中心的圆,再用伪元素加个三角形指针,通过旋转相应度数来实现,最初的指针指向是正左边,让它指向刻度1的位置,所以每次都-30deg即可实现,根据分子是多少去动态改变指针的指向。

5、详细代码如下(element是0<=element<=8的数字,因为分母固定为8):

wxml:

<view class="g-container" style="background: conic-gradient(from 180deg, #FF7E00 0deg, #FF7E00 {{element > 0 && (element < 8 ? ((element * 30) + 61 + ((element > 4 ? element * 0.18 : element * 0.22)) + 'deg') : (element * 30) + 120 + 'deg')}},rgb(255, 126, 0, 0.3) 0deg);">
    <view class="g-content">
        <view wx:for="{{emptyArray}}" wx:key="index" class="g-item" style="transform: rotate({{(index - 6) * 30 + 'deg'}}); height: {{index % 2 != 0 ? '12rpx' : ''}}; background-color: {{element > 0 && (element >= (index - 2)) ? '#FF7E00' : ''}};"></view>
    </view>
    <image src="https://externalimage.1hai.cn/160/227cebe0793b49deba48ad26059d3363.png" class="oil-icon" />
    <view class="oil-pointer">
        <view class="circle" style="transform: rotate({{(element * 30) - 30}}deg);"></view>
    </view>
</view>

 wxss:

.g-container {
  position: relative;
  width: 274rpx;
  height: 274rpx;
  left: 50%;
  /* transform: translate(-50%, 0); */
  margin-left: -137rpx;
  border-radius: 50%;
  background-color: rgb(255, 126, 0, 0.3);
  transform: rotate(-0.7deg);
}

.g-content {
  width: 260rpx;
  height: 260rpx;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.g-item {
  position: absolute;
  width: 4rpx;
  height: 18rpx;
  background: #FFCB99;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  transform-origin: 0 131rpx;
  z-index: 3;
  box-sizing: border-box;
}

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10458.html
标签
评论
发布的文章

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

HTML5基础2

2024-06-07 23:06:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!