微信小程序原生Progress进度条上传样式模板制作设计下载

今天给大家带来原生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>

二、wxss样式文件代码如下：

.weui-progress{
    margin-bottom: 24px;
}

三、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进度条上传样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。