小程序开发之基础内容(progress)
程序员文章站
2022-06-14 22:24:36
...
效果图
属性
参考:progress
代码
- app.js
//app.js
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
- app.json
{
"pages": [
"pages/progress/progress",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
- progress.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);
}
Page({
data: {
progress: 0,
disabled: false
},
upload: function () {
if (this.data.disabled) return;
this.setData({
progress: 0,
disabled: true
});
_next.call(this);
}
});
- progress.json
{
"navigationBarTitleText": "进度条"
}
- progress.wxml
<view class="page">
<view class="page__hd">
<view class="page__title">Progress</view>
<view class="page__desc">进度条,这里采用小程序原生的progress</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>
- progress.wxss
.weui-progress{
margin-bottom: 24px;
}