小程序专栏

小程序的进度条

读心悦 · 10月12日 · 2020年 本文800字 · 阅读2分钟27

小程序官方文档提供进度条组件:progress

当我们需要在页面设置进度条的时候,直接引入即可:

wxml:

<view class="container">
  <view class="progress-box">
    <progress percent="100" show-info border-radius="50" activeColor="red"  stroke-width="10" bindactiveend="complete"  backgroundColor="blue" active  duration="100"/>
  </view>
</view>

 

wxss:

.progress-box {
  margin: 20px auto;
  width: 80%;
}

js:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    num: 0
  },
  add() {
    var num = this.data.num;
    num += 10;
    this.setData({
      num: num
    })
  },
  onLoad: function() {

  },
  complete(e){
    console.log("加载完成!!")
    wx.showToast({
      title: '加载完成!!',
      icon: '',
      duration: 1000,
      mask: true
    })
  }
})

progress组件常见的属性:

percent:设置进度条的总长度【百分百】;

show-info:显示右边变化的数值;

border-radius:设置进度条圆角;

activeColor:进度块的颜色;

stroke-width:进度条的宽度;

bindactiveend:监听进度条完成时;

backgroundColor:进度条的背景颜色;

active:设置进度块的动画;

duration:设置进度块的动画执行时间;

如果想要了解更多详细的属性,就看看官方文档吧,这是记录我自己在使用进度条组件时的一些笔记!!

0 条回应

×