Progress进度条组件采用小程序源生的ui。
一、引入小程序weui css样式库，请参考第一章
二、在pages目录中新建目录progress以及文件progress.wxml，并添加如下代码
<view class="page">
<view class="page__hd">
<view class="page__title">Progress</view>
<view class="page__desc">进度条，这里采用小程序原生的progress(V型知识库 www.vxzsk.com原创)</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="weui-progress">
<view class="weui-progress__bar">
<progress percent="0" stroke-width="3" />
</view>
<view class="weui-progress__opr">
<icon type="cancel" size="22"></icon>
</view>
</view>
<view class="weui-progress">
<view class="weui-progress__bar">
<progress percent="50" stroke-width="3" />
</view>
<view class="weui-progress__opr">
<icon type="cancel" size="22"></icon>
</view>
</view>
<view class="weui-progress">
<view class="weui-progress__bar">
<progress percent="80" stroke-width="3" />
</view>
<view class="weui-progress__opr">
<icon type="cancel" size="22"></icon>
</view>
</view>
<view class="weui-progress">
<view class="weui-progress__bar">
<progress percent="{{progress}}" stroke-width="3" />
</view>
<view class="weui-progress__opr">
<icon type="cancel" size="22"></icon>
</view>
</view>
<view class="weui-btn-area">
<button type="primary" bindtap="upload" disabled="{{disabled}}">上传</button>
</view>
</view>
</view><!--V型知识库原创 www.vxzsk.com-->三、在根目录app.json配置文件中配置progress文件路径，保存后会自动生成对应的js、css等文件
"pages/progress/progress",
四、progress.wxss样式代码
/* pages/progress/progress.wxss www.vxzsk.com原创 */
.weui-progress{
margin-bottom: 24px;
}五、progress.js代码实现
1，页面初始数据
data: {
progress: 0,
disabled: false
},2，页面上传按钮js代码实现
function _next() {
var that = this;
if (this.data.progress >= 100) {
this.setData({
disabled: false
});
return true;
}
this.setData({
progress: ++this.data.progress
});
setTimeout(function () {
_next.call(that);
}, 20);
}---upload函数
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
upload: function () {
if (this.data.disabled) return;
this.setData({
progress: 0,
disabled: true
});
_next.call(this);
}六、预览效果
progress.js全部源码
// pages/progress/progress.js www.vxzsk.com V型知识库原创
Page({
/**
* 页面的初始数据
*/
data: {
progress: 0,
disabled: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
upload: function () {
if (this.data.disabled) return;
this.setData({
progress: 0,
disabled: true
});
_next.call(this);
}
})
function _next() {
var that = this;
if (this.data.progress >= 100) {
this.setData({
disabled: false
});
return true;
}
this.setData({
progress: ++this.data.progress
});
setTimeout(function () {
_next.call(that);
}, 20);
}
<!--www.vxzsk.com V型知识库原创 -->
此文章本站原创，地址 https://www.vxzsk.com/1908.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程