微信小程序—progress(进度条)

最新推荐文章于 2025-07-17 11:30:22 发布

原创最新推荐文章于 2025-07-17 11:30:22 发布 · 5.2k 阅读

4 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了如何在小程序中自定义进度条组件，包括设置进度、宽度、颜色及动画效果，通过实例展示了如何通过绑定事件调整进度条的各项属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<progress class="progress" percent="{{percent}}" show-info="{{isSi}}" stroke-width="{{sw}}" activeColor="{{pc}}" backgroundColor="{{pbc}}" active="{{isActive}}" active-mode="forwards">
</progress>

<view class="section">
  <input placeholder="设置进度" type="number" bindinput="progressInput" confirm-type="done" focus/>
</view>
<view class="section">
  <input placeholder="设置宽度" type="number" bindinput="swInput" confirm-type="done" focus/>
</view>
<view>
  <view class='text'>设置进度条颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="pcInput" confirm-type="done" focus/>
</view>
<view>
  <view class='text'>未选择的进度条的颜色(请使用十六进制颜色值,例如：#ff00ff)</view>
  <input class="section" placeholder="" value="#" bindinput="pbcInput" confirm-type="done" focus/>
</view>

<button class='btn' bindtap="bindButton">设置/取消进度条从左往右的动画</button>
<button class='btn' bindtap="bindButton1">设置/取消进度条右侧显示百分比</button>

//获取应用实例
const app = getApp()
var isFirst = true;
var isSiFirst = true;
Page({
  data: {
    percent: "20",     // 初始进度条百分数
    sw: 6,             // 初始进度条宽度
    pc: '#00ff00', 
    pbc: '#cccccc',
    isActive: true,
    isSi: true,
  },

  onLoad: function () {

  },
  //进度条输入事件
  progressInput: function (e) {
    this.setData({
      percent: e.detail.value
    })
  },
  //设置宽度事件
  swInput: function (e) {
    this.setData({
      sw: e.detail.value
    })
  },
  //设置进度条颜色事件
  pcInput: function (e) {
    this.setData({
      pc: e.detail.value
    })
  },
  //未选择的进度条的颜色事件
  pbcInput: function (e) {
    this.setData({
      pbc: e.detail.value
    })
  },
  //设置进度条从左往右的动画
  bindButton: function (e) {
    console.log(isFirst);
    if (isFirst == true) {
      isFirst = false;
      this.setData({
        isActive: false,
      })
    } else {
      isFirst = true;
      this.setData({
        isActive: true,
      })
    }
  },
  //设置进度条右侧显示百分比
  bindButton1: function (e) {
    if (isSiFirst == true) {
      isSiFirst = false;
      this.setData({
        isSi: false,
      })

    } else {
      isSiFirst = true;
      this.setData({
        isSi: true,
      })
    }
  },
})

.progress {
  width: 95%;
  margin: 20rpx;
}

.section {
  width: 93%;
  margin: 20rpx;
  background-color: #ccc;
  padding: 10rpx;
  font-size: 30rpx;
}

.btn {
  width: 95%;
  margin-top: 10rpx;
}

.text {
  width: 100%;
  font-size: 30rpx;
}

参考：https://blog.youkuaiyun.com/Afanbaby/article/details/78779805