用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

19

主题

158

帖子

1639

积分

布道者

城市天气查询小程序

Rank: 6Rank: 6

积分
1639
QQ
2018-7-20 11:50:50 jwq782108446开发者认证 布道者 楼主 11279
本帖最后由 jwq782108446 于 2018-7-20 14:28 编辑

恩,是的,时隔很久又回来啦

废话不多说,我们先来看看效果

12312321321.png

css实现的哦,不是canvas和svg实现的
wxml:
<view class="circle-out pr">
  <view class="circle pr">
    <view class="pa circle-left" style="transform: translate(-100%, 0) rotateZ({{item.per > 50 ? 180 * (item.per - 50) / 50 : 0 }}deg);"></view>
    <view class="pa circle-main1">
      <view class="br" style="border-color: {{ item.finish ? '#ffad0e' : '00a0e9' }};"></view>
    </view>
    <view class="pa circle-main2">
      <view class="br" style="border-color: {{ item.finish ? '#ffad0e' : '00a0e9' }};"></view>
    </view>
    <view class="pa circle-right" style="transform: translate(0, 0) rotateZ({{ 180 * item.per / 50 }}deg); opacity: {{ item.per >= 50 ? 0 : 1 }};"></view>
    <view class="pa circle-text f24 c333 fw7" style="color: {{ item.finish ? '#ffad0e' : '00a0e9' }};">{{ item.per }}%</view>
  </view>
</view>
wxss:  我这里是用的less写的
@width: 132rpx;
.circle-out {
  width: @width + 4;
  height: @width + 4;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
}
.circle {
  width: @width;
  height: @width;
  margin: 10rpx;
  .circle-main1 {
    top: 0;
    left: 50%;
    width: @width / 2;
    height: @width;
    z-index: 1;
    overflow: hidden;
    transform: translate(-100%, 0);
    view {
      width: @width - 8;
      height: @width - 8;
      border: 8rpx solid #00a0e9;
    }
  }
  .circle-main2 {
    top: 0;
    left: 50%;
    width: @width / 2;
    height: @width;
    overflow: hidden;
    view {
      width: @width - 8;
      height: @width - 8;
      border: 8rpx solid #00a0e9;
      transform: translateX(-50%);
    }
    transform: translate(0, 0);
    z-index:3;
  }
  .circle-left {
    top: 0;
    left: 50%;
    transform-origin: right center;
    width: @width / 2 + 30;
    height: @width;
    background-color: #fff;
    z-index: 2;
  }
  .circle-right {
    top: 0;
    left: 50%;
    z-index: 4;
    transform-origin: left center;
    background-color: #fff;
    width: @width / 2 + 30;
    height: @width;
  }
  .circle-text {
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    word-break: keep-all;
    color: #00a0e9;
  }
}


设计解释:

1.首先我们画两个长方形合在一起就是个正方形,每个长方形内在画个直径和高相等的圆, 对长方形设置超出隐藏,这样我们就得到两个独立的半圆了,合在一起就是个圆

2.然后再画两个长方形分别对应一个半圆,同时通过决定定位让长方形分别遮住两个半圆,并修改长方形的旋转中心, 注意左右的区分

3. 接下就简单了, 设置长方形的旋转角度即可  旋转180°对应一个半圆

4. 当显示区域小于或等于50%时,我们不需要处理左侧的区域,只需要旋转右侧的长方形即可

5.当显示区域大于50%时,右侧的直接设置为透明, 我们再旋转左侧的长形,此时注意旋转的角度为:  总百分比 - 50%  得到的就是我们需要的旋转百分比, 然后再计算下旋转角度即可

6. 至此我们就用css实现了 画个 圆环的进度条啦

ps: 语文表达欠佳,欢迎多多指正


代码片段: wechatide://minicode/jDUgDFmk7FDh  ------------------------ 
导入代码片段可以直接看到效果的

偷偷的宣传下自己的小程序 (*^__^*)
qrcode.jpg

麻烦您点点小广告,您的点击是对我最大的支持




天气查询小程序,欢迎大家使用,后续会有更多的功能融合进来
                              我的小小网站
         

也有问题咨询可加vx: jwq782108446
不错哟
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
还可以加QQ交流群咨询:536592077。
发新帖
您需要登录后才可以回帖 登录 | 立即注册