欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序开发之基础内容(progress)

程序员文章站 2022-06-14 22:24:36
...

效果图

小程序开发之基础内容(progress)

属性

参考:progress

代码

  1. 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
  }
})
  1. app.json
{
  "pages": [
    "pages/progress/progress",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
  1. 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);
  }
});
  1. progress.json
{
  "navigationBarTitleText": "进度条"
}
  1. 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>
  1. progress.wxss
.weui-progress{
    margin-bottom: 24px;
}
相关标签: 小程序