微信小程序进度条样式_微信小程序—progress(进度条)
設置進度條顏色(請使用十六進制顏色值,例如：#ff00ff)
未選擇的進度條的顏色(請使用十六進制顏色值,例如：#ff00ff)
設置/取消進度條從左往右的動畫
設置/取消進度條右側顯示百分比
//獲取應用實例
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,
})
}
},
})
.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;
}
參考：https://blog.csdn.net/Afanbaby/article/details/78779805
總結
以上是生活随笔為你收集整理的微信小程序进度条样式_微信小程序—progress(进度条)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2010 Oct MVP Open Da
- 下一篇： 大旗网