WeUI for 小程序progress进度条

2018年10月14日 11:38 | 66次浏览 作者原创 版权保护

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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程