微信小程序纯css制作圆形进度条所遇到的问题
基本原理:
<template>
<view class="wrapBox" style="background:{{color}};width:{{circleWidth}}rpx;height:{{circleWidth}}rpx;">
<view class="leftBox" style="width:50%;height:100%;border-radius:{{radius}}rpx 0 0 {{radius}}rpx;transform:rotateZ({{deg>180?deg-180:0}}deg)"></view>
<view class="rightBox" style="width:50%;height:100%;border-radius:0 {{radius}}rpx {{radius}}rpx 0;background:{{deg>180?color:'#F0F0F0'}};transform: rotateZ({{deg>180?0:deg}}deg)"></view>
<view class="roundMask" style="width:{{maskWidth}}%;height:{{maskWidth}}%;background:{{backgroundColor}}"></view>
</view>
</template> <script>
import wepy from 'wepy'
export default class Progress extends wepy.component {
props = {
color: {
type: String,
default: "#FFD600"
},
deg: {
type: Number,
default: 0
},
circleWidth: {
type: Number,
default: 34
},
progressWidth: {
type: Number,
default: 10
},
backgroundColor: {
type: String,
default: '#fff'
}
}
computed = {
maskWidth() {
return (1 - this.progressWidth / this.circleWidth) * 100
},
maskRadius() {
return (1 - this.progressWidth / this.circleWidth) * 50
},
radius() {
//windowWidth在app.wpy的onShow中获取
return this.$root.$parent.globalData.windowWidth * this.circleWidth / 375
}
}
}
</script> <style lang="less">
.wrapBox {
position: absolute;
border-radius: 50%;
.leftBox,
.rightBox {
overflow: hidden;
float: left;
background: #F0F0F0;
}
.leftBox {
transform-origin: right center;
}
.rightBox {
transform-origin: left center;
}
.roundMask {
position: absolute;
top: 50%;
left: 50%;
border-radius:50%;
transform: translate(-50%, -50%);
}
}
</style>
微信小程序纯css制作圆形进度条所遇到的问题的更多相关文章
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- 纯CSS实现圆形进度条
CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...
- 微信小程序如何开发制作
微信小程序如何开发制作 微容SMO是一款微信小程序的免费在线制作工具,用户在微容平台上无需编辑代码,可通过拖拽式操作即可完成小程序的制作,真正意义上实现了小程序零代码免费制作! 消除技术门槛:无需代码 ...
- 微信小程序裁剪图片成圆形
代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...
- 超简单:纯CSS实现的进度条
——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 用HTML、CSS、JS制作圆形进度条(无动画效果)
逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大 ...
- 微信小程序零基础制作指南
第一步 准备工作 下载腾讯官方的微信web开发工具并且安装 第二步 登录已经注册小程序的微信账号并且选择合适的路径新建小程序项目. 新建一个页面文件夹,每一个页面需要一个文件夹,里面包括写逻辑脚本的j ...
随机推荐
- hdu2196 Computer【树形DP】【换根法】
Computer Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- Oracle性能优化之Oracle里的执行计划
一.执行计划 执行计划是目标SQL在oracle数据库中具体的执行步骤,oracle用来执行目标SQL语句的具体执行步骤的组合被称为执行计划. 二.如何查看oracle数据库的执行计划 oracle数 ...
- Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%。再往后,每提高0.1%,优化难度成指数级增长了。哪怕是千分之一,也直接影响用户体验,影响每天上万张机票的销售额。 在高并发场景下,提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap,它比起HashMap,有更小粒度的锁,并发读写性能更好。线程安全的StringBuilder取代S
Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...
- toml-lang - Tom's Obvious, Minimal Language
Tom's Obvious, Minimal Languagehttps://github.com/toml-lang/toml
- 在SQL Server里如何进行数据页级别的恢复
在SQL Server里如何进行页级别的恢复 关键词:数据页修复 在今天的文章里我想谈下每个DBA应该知道的一个重要话题:在SQL Server里如何进行页级别还原操作.假设在SQL Server里你 ...
- java-信息安全(十八)java加密解密,签名等总结
一.基本概念 加密: 密码常用术语: 明文,密文,加密,加密算法,加密秘钥,解密,解密算法,解密秘钥, 密码分析:分析密文从而推断出明文或秘钥的过程 主动攻击:入侵密码系统,采用伪造,修改,删除等手段 ...
- java-mybaits-00103-入门程序原生的【查、增、删、改】
一.需求 实现以下功能: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户 更新用户 删除用户 二.具体步骤 1.增加pom引用 2.增加log4j.properties # ...
- python技巧总结之set、日志、rsa加密
一.日志模块logging模块调用 1.日志模块使用原理 #!/usr/bin/python # -*- coding:utf-8 -*- import logging # 方式一: "&q ...
- (转)《SSO CAS单点系列》之 15分钟让你了解SSO技术到底是个什么鬼!
Web应用系统的演化总是从简单到复杂,从单功能到多功能模块再到多子系统方向发展. .当前的大中型Web互联网应用基本都是多系统组成的应用群,由多个web系统协同为用户提供服务. 多系统应用群,必然意味 ...
- Web Services 简介
通过使用 Web Services,您的应用程序可以向全世界发布信息,或提供某项功能.Web Services 脚本平台需支持 XML + HTTP. Web Services 简介 Web Serv ...