关键词:
也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。
在微信小程序开发中,progress用来实现水平进度条效果
1 基本使用
<progress percent="80" stroke-width="12" show-info color="pink" active />
效果就是如上图所示
- percent 表示当前的进度
- stroke-width 进度条的宽度
- color 进度样的颜色
- show-info 最右侧显示当前进度
- active 如果所示的动态加载显示
2 自定圆形进度条
2.1 wxml
<view class="container">
<view class='progress_box'>
<!-- 背景 灰色 -->
<canvas class="progress_bg" id="canvasProgressbg" canvas-id="canvasProgressbg"> </canvas>
<!-- 进度 -->
<canvas class="progress_canvas" id="canvasProgress" canvas-id="canvasProgress"> </canvas>
<!-- 中间显示的文本 -->
<view class="progress_text">
<view class="progress_dot"></view>
<text class='progress_info'> progress_txt</text>
</view>
</view>
</view>
2.2 js
Page(
/**
* 页面的初始数据
*/
data:
progress_txt: '加载中...',
count: 0, // 设置 计数器 初始为0
countTimer: null // 设置 定时器 初始为null
,
//倒计时方法
countInterval: function ()
// 设置倒计时 定时器 每100毫秒执行一次,计数器count+1 ,耗时6秒绘一圈
this.countTimer = setInterval(() =>
if (this.data.count <= 60)
/* 绘制彩色圆环进度条
注意此处 传参 step 取值范围是0到2,
所以 计数器 最大值 60 对应 2 做处理,计数器count=60的时候step=2
*/
this.drawProgressCircle(this.data.count / (60 / 2));
this.setData(
progress_txt: (this.data.count++) + '%'
);
else
this.setData(
progress_txt: "加载完成"
);
clearInterval(this.countTimer);
, 100)
,
/**
* 绘制灰色背景
*/
drawProgressbg: function ()
// 使用 wx.createContext 获取绘图上下文 context
var ctx = null;
wx.createSelectorQuery()
.select("#canvasProgressbg")
.context(function (res)
console.log("节点实例:", res);
// 节点对应的 Canvas 实例。
ctx = res.context;
ctx.setLineWidth(4); // 设置圆环的宽度
ctx.setStrokeStyle('#EEEEEE'); // 设置圆环的颜色
ctx.setLineCap('round') // 设置圆环端点的形状
ctx.beginPath(); //开始一个新的路径
ctx.arc(110, 110, 100, 0, 2 * Math.PI, false);
//设置一个原点(110,110),半径为100的圆的路径到当前路径
ctx.stroke(); //对当前路径进行描边
ctx.draw();
)
.exec();
,
/**
* 绘制小程序进度
* @param * step
*/
drawProgressCircle: function (step)
let ctx = null;
wx.createSelectorQuery()
.select("#canvasProgress")
.context(function (res)
console.log("节点实例:", res); // 节点对应的 Canvas 实例。
ctx = res.context;
// 设置渐变
var gradient = ctx.createLinearGradient(200, 100, 100, 200);
gradient.addColorStop("0", "#2661DD");
gradient.addColorStop("0.5", "#40ED94");
gradient.addColorStop("1.0", "#5956CC");
ctx.setLineWidth(10);
ctx.setStrokeStyle(gradient);
ctx.setLineCap('round')
ctx.beginPath();
// 参数step 为绘制的圆环周长,从0到2为一周 。 -Math.PI / 2 将起始角设在12点钟位置 ,结束角 通过改变 step 的值确定
ctx.arc(110, 110, 100, -Math.PI / 2, step * Math.PI - Math.PI / 2, false);
ctx.stroke();
ctx.draw()
)
.exec();
,
onReady: function ()
this.drawProgressbg();
this.countInterval()
,
)
2.3 wxss 样式文件中
.progress_box
position: relative;
width:220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
.progress_bg
position: absolute;
width:220px;
height: 220px;
.progress_canvas
width:220px;
height: 220px;
.progress_text
position: absolute;
display: flex;
align-items: center;
justify-content: center
.progress_info
font-size: 36rpx;
padding-left: 16rpx;
letter-spacing: 2rpx
.progress_dot
width:16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #fb9126;
完毕
微信小程序progress进度条内部圆角及内部条渐变色
参考技术A微信小程序progress进度条内部圆角及渐变色设置progressCSS:效果: 查看详情
微信小程序|组件-进度条progress
1.效果图2.wxml代码<progresspercent="20"show-info/><progresspercent="40"stroke-width="12"/><progresspercent="60"color="pink"/>&l 查看详情
微信小程序|组件-进度条progress
1.效果图2.wxml代码<progresspercent="20"show-info/><progresspercent="40"stroke-width="12"/><progresspercent="60"color="pink"/><progresspercent="80"active/> 查看详情
ios制作个圆形进度条
...l*percentLabel;//数字进度label进度条进度改变的方法-(void)drawprogress:(CGFloat)progress;环行进度条用calayer来做 查看详情
android进度条样式怎么改
Android系统提供了两大类进度条样式,长形进度条(progressBarStyleHorizontal)和圆形进度条(progressBarStyleLarge)。android进度条样式更改:第一种(默认样式(中等圆形))第二种(长方形进度条)进度条用处很多,比如,应用程序装载资源... 查看详情
Visual Basic 圆形进度条
】VisualBasic圆形进度条【英文标题】:Visualbasiccircularprogressbar【发布时间】:2015-01-1118:11:15【问题描述】:我正在尝试制作一个具有良好UI的软件,但我在VB方面并不专业......如何制作圆形进度条?举例【问题讨论】:见codeproject.... 查看详情
微信小程序-video禁止拖动进度条
参考技术Awxmljs 查看详情
android基础知识4-3.7progressbar(进度条)详解
一、简介 ProgressBar(进度条)是UI界面中一种非常实用的组件,通常用于向用户像是某个耗时操作完成的百分比。进度条可动态地显示进度,因此避免长时间地执行某个操作时,让用户感觉程... 查看详情
微信小程序实现加载进度条
参考技术Atranslate3d()CSS函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达,分别表示他在三个方向上移动的距离。 查看详情
圆形半径的Android进度条动态变化
】圆形半径的Android进度条动态变化【英文标题】:AndroidProgressbarwithcircleradiuschangesDynamically【发布时间】:2012-02-2212:53:06【问题描述】:我想根据滑块位置更改圆半径我分别创建了这两个。同时将circle方法应用于进度条。面临错... 查看详情
我想在 30 秒后重新启动一个圆形进度条
】我想在30秒后重新启动一个圆形进度条【英文标题】:Iwanttorestartacircularprogressbarafter30seconds【发布时间】:2022-01-0223:07:20【问题描述】:constuseProgress=(maxTimeInSeconds=30)=>const[elapsedTime,setElapsedTime]=useState(0);const[progress,setProgres 查看详情
processbar进度条
1.进度条关键属性2.进度条的常用方法progress=(ProgressBar)findViewById(R.id.horiz);(1)获取第一进度条:progress.getProgress();(2)获取第二进度条:progress.getSecondaryProgress();(3)获取最大进度条:progress.getMax();(4)增加进度条刻度:progres... 查看详情
进度条progress的用法介绍(代码片段)
...;尤其是希望能够通过可视化的形式进行展示,进度条Progress为此而生。基本用法在具体使用之前需要安装progress依赖。pipinstallprogress进度条Progress的用法非常简单,首先导入库Bar,其次设置名字、数据长度、进度 查看详情
progress组件(进度条)
progress组件:进度条 progress组件的属性: percent:类型:number 设置百分比(0~100) show-info:类型:布尔 在进度条右侧显示百分比 border-radius:类型:number 圆角大小 font-size:类... 查看详情
小红书微信小程序可以调节进度吗
参考技术A可以。可以看到进度条,拖动进度条即可调整播放进度,可以全屏播放,可以下载视频,可以调整视频音量。 查看详情
微信小程序canvas2d绘制圆环进度条组件
参考技术Ahttps://developers.weixin.qq.com/miniprogram/dev/component/canvas.htmlCanvas2D接口(type="2d"),支持同层渲染的一个圆环进度条。(wx.createCanvasContext已废弃)https://gitee.com/susuhhhhhh/componentshttps://gitee.com/susuhhhhhh/wxmini_demo 查看详情
bootstrap进度条
【Bootstrap进度条】1、基础进度条<divclass="progress"><divclass="progress-bar"style="width:40%;"></div></div> 1)根div必须class="progress" 2)前景div为class="progress-bar",通过style指定宽度 2、指定颜色. 查看详情
进度条与拖动条的使用学习(代码片段)
...进度条常用属性详解:android:max:进度条的最大值android:progress:进度条已完成进度值android:progressDrawable:设置轨道对应的Drawable对象android:indeterminate:如果设置成true,则进度条不精确显示进度android:indeterminateDrawable:设置不显示... 查看详情