WEUI在微信小程序中的使用 |
项目框架的制作 |
栏目首页 |
weui基础组件 |
weui表单 |
weui 操作反馈相关 |
weui 导航 navbar 切换(类tab)使用教程 |
weui 搜索searchbar使用教程 |
当前阅读教程:小程序Weui在线教程 > weui progress进度条使用教程 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: weui preview表单预览使用教程 | 下一篇: weui footer页脚使用教程 |
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> js代码如下 // pages/01jichuzujian/09-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: { }, upload: function () { if (this.data.disabled) return; this.setData({ progress: 0, disabled: true }); _next.call(this); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) wxss代码如下 .weui-progress{ margin-bottom: 24px; } |
|
上一篇: weui preview表单预览使用教程 | 下一篇: weui footer页脚使用教程 |