官网api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/progress.html
进度条是一种用户体验很好的加载状态,如软件升级下载进度, 视频,图片下载进度,以及上传等,
效果图如下,
1.index.js中:
//index.js
//获取应用实例
const app = getApp()
var isFirst = true;
var isSiFirst = true;
Page({
data: {
percent: "20",
sw: 6,
pc: '#00ff00',
pbc: '#cccccc',
isActive: true,
isSi: true,
},
onLoad: function () {
},
//进度条输入事件
progressInput: function (e) {
this.setData({
percent: e.detail.value
})
},
//设置宽度事件
swInput: function (e) {
this.setData({
sw: e.detail.value
})
},
//设置进度条颜色事件
pcInput: function (e) {
this.setData({
pc: e.detail.value
})
},
//未选择的进度条的颜色事件
pbcInput: function (e) {
this.setData({
pbc: e.detail.value
})
},
//设置进度条从左往右的动画
bindButton: function (e) {
console.log(isFirst);
if (isFirst == true) {
isFirst = false;
this.setData({
isActive: false,
})
} else {
isFirst = true;
this.setData({
isActive: true,
})
}
},
//设置进度条右侧显示百分比
bindButton1: function (e) {
if (isSiFirst == true) {
isSiFirst = false;
this.setData({
isSi: false,
})
} else {
isSiFirst = true;
this.setData({
isSi: true,
})
}
},
})
2.index.wxml:
<progress class="progress" percent="{{percent}}" show-info="{{isSi}}" stroke-width="{{sw}}" activeColor="{{pc}}" backgroundColor="{{pbc}}" active="{{isActive}}" active-mode="forwards">
</progress>
<view class="section">
<input placeholder="设置进度" type="number" bindinput="progressInput" confirm-type="done" focus/>
</view>
<view class="section">
<input placeholder="设置宽度" type="number" bindinput="swInput" confirm-type="done" focus/>
</view>
<view>
<view class='text'>设置进度条颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
<input class="section" placeholder="" value="#" bindinput="pcInput" confirm-type="done" focus/>
</view>
<view>
<view class='text'>未选择的进度条的颜色(请使用十六进制颜色值,例如:#ff00ff)</view>
<input class="section" placeholder="" value="#" bindinput="pbcInput" confirm-type="done" focus/>
</view>
<button class='btn' bindtap="bindButton">设置/取消进度条从左往右的动画</button>
<button class='btn' bindtap="bindButton1">设置/取消进度条右侧显示百分比</button>
3.index.wxss中:
/**index.wxss**/
.progress {
width: 95%;
margin: 20rpx;
}
.section {
width: 93%;
margin: 20rpx;
background-color: #ccc;
padding: 10rpx;
font-size: 30rpx;
}
.btn {
width: 95%;
margin-top: 10rpx;
}
.text {
width: 100%;
font-size: 30rpx;
}
4.demo下载:
本人菜鸟一个,有什么不对的地方希望大家指出评论,大神勿喷,希望大家一起学习进步!