1.最终效果

2.技术点:a. css3 clip-path , b.根据角度和直边计算另一个直边的长度

3.实现思路:

  a.3个层(灰色圆形层, 红色圆形层,白色圆形层)  ,其中灰色和红色层大小一样, 白色比灰色的小一个环形.

  b.通过8个角度百分百分析红色层的剪切点剪切出不同的图形

4.代码

   wxml代码:

  

<view class="chart">
<view>
<view>
<span style="clip-path: polygon({{d1}})"></span>
<view>02月</view>
</view>
<span>档期剩余<em> 100 </em>天</span>
</view> <view>
<view>
<span style="clip-path: polygon({{d2}})"></span>
<view>02月</view>
</view>
<span>档期剩余<em> 100 </em>天</span>
</view>
<view>
<view>
<span style="clip-path: polygon({{d3}})"></span>
<view>02月</view>
</view>
<span>档期剩余<em> 100 </em>天</span>
</view>
</view>

  wxss代码:

.chart{
display: flex;
justify-content:space-around;
height: 230rpx;
padding: 25rpx 0;
}
.chart>view{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
} .chart>view>view{
display: flex;
justify-content: center;
align-items: center;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: #e1e1e1;
}
/* 正方形 */
.chart>view>view>span{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: #ff87a9;
box-sizing: border-box;
z-index:;
}
.chart>view>view>view{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 116rpx;
height: 116rpx;
background: #fff;
border-radius: 50%;
color: #2b2b2b;
z-index:;
}

  js代码:

/**
*
根据百分比计算多边形剪切的点
*
@module fan-point
diameter 半径
*/
//
function getPoint(percentage = 0, diameter = 70) {
var ret = [];
var angle = (percentage * 360).toFixed(0);//角度
if (angle == 0) {
ret.push("0 0");
}
else if (angle == 360) {
ret.push("0 0");
ret.push("100% 0");
ret.push("100% 100%");
ret.push("0 100% 0");
}
else {
ret.push("50% 0");//
if (angle <= 45) {
ret.push(point(((tan(angle) + 1) * diameter)) + "% 0");
}
if (angle > 45) {
ret.push("100% 0");//添加右上角点
} if (angle > 45 && angle <= 90) {
ret.push("100% " + point((1 - tan(90 - angle)) * diameter) + "%");
}
if (angle > 90 && angle <= 135) {
ret.push("100% " + point(((tan(angle - 90) + 1) * diameter)) + "%");
}
if (angle > 90 && angle <= 135) {
ret.push("100% " + point(((tan(angle - 90) + 1) * diameter)) + "%");
} if (angle > 135) {
ret.push("100% 100%");//添加右下角点
} if (angle > 135 && angle <= 180) {
ret.push(point(((tan(180 - angle) + 1) * diameter)) + "% 100%");
}
if (angle > 180 && angle <= 225) {
ret.push(point(((1 - tan(angle - 180)) * diameter)) + "% 100%");
} if (angle > 225) {
ret.push("0 100%");//添加左下角点
} if (angle > 225 && angle <= 270) {
ret.push("0 " + point((tan(270 - angle) + 1) * diameter) + "%");
}
if (angle > 270 && angle <= 315) {
ret.push("0 " + point((1 - tan(angle - 270)) * diameter) + "%");
} if (angle > 315) {
ret.push("0 0");//添加左上角点
} if (angle > 315 && angle < 360) {
ret.push(point((1 - tan(360 - angle)) * diameter) + "% 0");
} ret.push("50% 50%");
}
return ret.toString();
} function tan(angle) {
return Math.tan(angle * 2 * Math.PI / 360);
}
function point(leng, diameter = 70) {
if (leng == 0) {
return 0;
}
else {
return (leng / (diameter * 2) * 100).toFixed(2);
}
} module.exports = {
getPoint: getPoint
}

调用:

var point = require("../../utils/fan-point.js");
var that; Page({
data: {
d1:"",
d2:"",
d3:""
},
onLoad: function () {
that = this;
that.setData({d1:point.getPoint(0.875),d2:point.getPoint(0.18),d3:point.getPoint(0.625)});
}
})

[原创]微信小程序 实现 圆环 百分百效果的更多相关文章

  1. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  2. 微信小程序实现滑动删除效果

    在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...

  3. 原创:微信小程序开发要点总结

    废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...

  4. 微信小程序实现淡入淡出效果(页面跳转)

    //目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...

  5. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  6. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...

  7. 微信小程序左右滚动公告栏效果

    <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text c ...

  8. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

  9. 微信小程序 - 贝塞尔曲线(购物车效果)

    转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载

随机推荐

  1. UICollectionView的注册

    UICollectionView的dataSource中的item的注册 itme的注册和tableview中cell的创建是不同的 cell的创建是在cell中 而itme的注册是在viewDidL ...

  2. 修改eclipse最近访问的工程的配置文件

    此文件为:org.eclipse.ui.ide.prefs 配置项为:RECENT_WORKSPACES= 示例:RECENT_WORKSPACES=E\:\\Workspaces\\wokspace ...

  3. 对MySQL交换分区的实践

    前言 在介绍交换分区之前,我们先了解一下 mysql 分区. 数据库的分区有两种:水平分区和垂直分区.而MySQL暂时不支持垂直分区,因此接下来说的都是水平分区.水平分区即:以行为单位对表进行分区.比 ...

  4. Custom Hosting in IIS/WAS

    常常需要与宿主实例进行交互.这对于使用自托管的方式是不可或缺的.当使用IIS或WAS时,不能直接访问宿主.为了克服这个障碍,WCF提供了一个宿主工厂.在.svc文件中使用Factory标签,使用此工厂 ...

  5. PHP单词表

    输出语句printechovar_dumpprint_rprintf变量的操作unset预定义变量$_SERVER$_GET$_POST$_REQUEST$_COOKIE,$_SESSION 会话技术 ...

  6. ZBrush中物体的显示与隐藏

    在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...

  7. Python内置数据结构之字典dict

    1. 字典 字典是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下.键可能是数(整数索引).字符串或元组.字典(日常生活中的字典和Python字典)旨在让你能够轻松地找到特定的单 ...

  8. jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层

    1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...

  9. Django配置MariaDB数据库

    Django中配置MariaDB数据库.配置文件如下: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': ...

  10. Memcached的实战笔记

    官网:http://memcached.org/ 优秀Blogs: http://blog.csdn.net/jingqiang521/article/details/48345021 开启telne ...