[原创]微信小程序 实现 圆环 百分百效果
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)});
}
})
[原创]微信小程序 实现 圆环 百分百效果的更多相关文章
- 微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
- 原创:微信小程序开发要点总结
废话不多少,下面是对我从开发微信小程序的第一步开始到发布的总结,觉得对您有帮助的话,可以赞赏下,以对我表示鼓励. 一:首先注册登录微信公众平台,这个平台很重要,以后查文档全在上面看.https://m ...
- 微信小程序实现淡入淡出效果(页面跳转)
//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写 <!--wxml--><!--蒙版(渐出淡去效果)--><view class=" ...
- 使用movable-view制作可拖拽的微信小程序弹出层效果。
仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...
- 微信小程序动态显示项目倒计时效果
效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...
- 微信小程序左右滚动公告栏效果
<view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text c ...
- 微信小程序实现验证码倒计时效果
效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...
- 微信小程序 - 贝塞尔曲线(购物车效果)
转载来源于:https://segmentfault.com/a/1190000011710786 简化了一下,发出来吧 示例源码:点击下载
随机推荐
- Core Bluetooth的基本常识
每个蓝牙4.0设备都是通过服务(Service)和特征(Characteristic)来展示自己的 一个设备必然包含一个或多个服务,每个服务下面又包含若干个特征 特征是与外界交互的最小单位 比如说,一 ...
- Spark RDD概念学习系列之不同角度看RDD
不多说,直接上干货!
- SQL Server 日常维护--查询当前正在执行的语句、死锁、堵塞
查询当前正在执行的语句: SELECT der.[session_id],der.[blocking_session_id], sp.lastwaittype,sp.hostname,sp.progr ...
- 欢迎来到SQL学院
给学习SQL的同学的福利@ http://sqlschool.modeanalytics.com/ 第一部分 学习SQL 本教程是专为那些想用数据回答问题的人们而设计的.从很大程度上讲,SQL是数据分 ...
- Linux下编译安装Memcache
需要gcc,make,cmake,autoconf,libtool等工具,联网后,yum install -y gcc,make,cmake,autoconf,libtool 编译安装libevent ...
- 理解HashMap底层原理,一个简单的HashMap例子
package com.jl.testmap; /** * 自定义一个HashMap * @author JiangLai * */ public class MyHashMap<K,V> ...
- 查看md文件
使用命令将md文件转为html,在浏览器中演示 通过npm安装i5ting_toc 安装好node之后,可以直接使用npm.Windows+R打开运行框,输入cmd,打开命令窗口.连网的情况下,输入如 ...
- java真实面试题(1)
2019年春杭州邦盛科技java面试题. 1,java基本类型 byte,char,short,int,long,float,double,boolean. 2,重写重载 重写,子类重写父类的方法,方 ...
- 使用短信猫发送短信java代码
短信猫简单配置:https://www.cnblogs.com/Big-Boss/p/9699880.html 发送短信: package utils; import org.smslib.AGate ...
- (5)pyspark----共享变量
如果想在节点之间共享一份变量,spark提供了两种特定的共享变量,来完成节点之间的变量共享. (1)广播变量(2)累加器 二.广播变量 概念: 广播变量允许程序员缓存一个只读的变量在每台机器上,而不是 ...