微信小程序实现加载进度条

1.实现效果

2.实现原理

2.1第一个线条加载，设置translate3d属性，动态的改变百分比，实现加载。

translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

translate3d(tx, ty, tz)

tx是一个代表移动向量的横坐标。
ty是一个代表移动向量的纵坐标。
tz是一个代表移动向量的z坐标。它不能是值；那样的移动是没有意义的。

transform: translate3d(-{{100-scwidth}}%, 0px, 0px);

2.2 圆环加载绕圈，高亮部分长度不变，设置不同的border-color+rotate动画

 border-top: 6rpx solid rgba(0, 0, 0, 0.25);border-right: 6rpx solid rgba(0, 0, 0, 0.25);border-bottom: 6rpx solid rgba(0, 0, 0, 0.25);border-left: 6rpx solid orange;

2.3 圆环加载，长度从0-100%，通过canvas实现

wx.createCanvasContext('canvasCircle')

3.实现代码

<button class='btn' bindtap='action'>加载按钮</button>
<view class='progress' hidden="{{scwidth==0}}" style="top:0px;"><view class='progress-bar' style="transform: translate3d(-{{100-scwidth}}%, 0px, 0px);"></view><view class='progress-spinner'></view>
</view>
<view class="load_circle" hidden="{{scwidth==0}}"></view>
<!-- canvas -->
<view class="loading-warp"><canvas class="canvas" canvas-id="canvasCircle"></canvas><canvas class="canvas-mask" canvas-id="canvasRing"></canvas><view class="rate">{{step}}%</view>
</view>

page {background-color: #fff;
}.btn {margin: 140rpx auto;width: 150rpx;height: 50rpx;line-height: 50rpx;text-align: center;background-color: orange;font-size: 27rpx;color: #ffffff;
}.progress {pointer-events: none;top: 0;position: fixed;width: 100%;left: 0;z-index: 2000;
}.progress-bar {width: 100%;height: 4rpx;overflow: hidden;transition: all 200ms ease 0s;background: orange;
}.progress-spinner {position: absolute;top: 10rpx;right: 10rpx;z-index: 2000;display: block;border-color: orange;
}.progress-spinner::after {content: "";display: block;width: 24rpx;height: 24rpx;box-sizing: border-box;border: solid 4rpx transparent;border-top-color: inherit;border-left-color: inherit;border-radius: 50%;-webkit-animation: load-spinner 0.4s linear infinite;animation: load-spinner 0.4s linear infinite;
}@keyframes load-spinner {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}.load_circle {margin: 60px auto;width: 200rpx;height: 200rpx;position: relative;border-radius: 50%;border-top: 6rpx solid rgba(0, 0, 0, 0.25);border-right: 6rpx solid rgba(0, 0, 0, 0.25);border-bottom: 6rpx solid rgba(0, 0, 0, 0.25);border-left: 6rpx solid orange;animation: circle-ani 1s infinite linear;
}
@keyframes circle-ani {0% {-webkit-transform: rotate(0);transform: rotate(0);}100% {-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}/* canvas */
.loading-warp {z-index: 0;position: relative;margin: 100px auto 20px;width: 200px;height: 200px;
}.canvas {z-index: 1;width: 200px;height: 200px;
}.canvas-mask {z-index: 2;position: absolute;top: 0;left: 0;width: 200px;height: 200px;
}.rate {z-index: 1;position: absolute;top: 50%;left: 0;width: 100%;text-align: center;color: #333;font-size: 40rpx;transform: translateY(-50%);
}

// pages/wxCase/loadingBar/index.js
Page({/*** 页面的初始数据*/data: {scwidth: 0,flag: false,step: 0},action() {if (!this.data.flag) {this.setData({scwidth: this.data.scwidth + 3,flag: true})if (this.data.scwidth < 100) {setTimeout(() => {this.actionDack();}, 100)} else {this.setData({scwidth: 0})}}},actionDack() {this.setData({scwidth: this.data.scwidth + 3,})if (this.data.scwidth < 100) {setTimeout(() => {this.actionDack();}, 100)} else {this.setData({scwidth: 0,flag: false})}},onReady: function () {var that = this;var cxt = wx.createCanvasContext('canvasCircle');cxt.setLineWidth(6);cxt.setStrokeStyle('#eaeaea');cxt.setLineCap('round');cxt.beginPath();cxt.arc(100, 100, 96, 0, 2 * Math.PI, false);cxt.stroke();cxt.draw();//加载动画var steps = 1, startAngle = 1.5 * Math.PI, endAngle = 0, speed = 100, sec = 100;function drawing(s, e) {var context = wx.createCanvasContext('canvasRing');context.setLineWidth(6);context.setStrokeStyle('orange');context.setLineCap('round');context.beginPath();context.arc(100, 100, 96, s, e, false);context.stroke();context.draw();}function drawLoading() {if (steps < 101) {that.setData({step: steps})endAngle = steps * 2 * Math.PI / speed + startAngle;drawing(startAngle, endAngle);steps++;} else {clearInterval(this.interval);}}this.interval = setInterval(drawLoading, sec);}})

4.写在最后

微信小程序实现加载进度条相关推荐

微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...

微信小程序实现加载进度条

1.实现效果

2.实现原理

2.1第一个线条加载，设置translate3d属性，动态的改变百分比，实现加载。

2.2 圆环加载绕圈，高亮部分长度不变，设置不同的border-color+rotate动画

2.3 圆环加载，长度从0-100%，通过canvas实现

3.实现代码

4.写在最后

微信小程序实现加载进度条相关推荐

最新文章

热门文章

微信小程序实现加载进度条

1.实现效果

2.实现原理

2.1第一个线条加载，设置translate3d属性，动态的改变百分比，实现加载。

2.2 圆环加载绕圈，高亮部分长度不变，设置不同的border-color+rotate动画

2.3 圆环加载，长度从0-100%，通过canvas实现

3.实现代码

4.写在最后 insertAdIfNeeded();

微信小程序实现加载进度条相关推荐

最新文章

热门文章

4.写在最后