原生进度条微信小程序实现

程序猿向前跑

已于 2022-10-18 14:52:48 修改

阅读量654

点赞数

分类专栏：移动端文章标签：微信小程序 javascript 前端

于 2022-10-18 14:00:38 首次发布

本文链接：https://blog.csdn.net/qq_46199553/article/details/127387280

版权

移动端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

这是一个关于微信小程序中实现进度条组件的示例。组件包括了样式定义（wxss）和逻辑处理（js）。组件接收`percentage`、`barColor`、`textColor`和`trackColor`等属性，用于自定义进度条的百分比、颜色和轨道颜色，并在界面上动态展示。样式部分定义了进度条区域和条纹的宽度、颜色等，js部分则定义了组件的属性和方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

css样式

/* base-ui/ms-progress-bar/index.wxss */
@other-font: 28rpx;
@ms-primary:#169BD5;
@ms-success:#29AA4F;
.progress-bar-area{
height: 36rpx;
position: relative;
}
.progress-bar{
height: inherit;
transition: width 0.2s linear;
position: absolute;
z-index: 1;
}
.bar-text{
font-size: @other-font;

position: absolute;
left: 50%;
z-index: 2;
}

js样式

// base-ui/ms-progress-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
    //进度条百分比
    percentage:{
      type:Number,
      value:0
    },
    //进度条颜色
    barColor:{
      type:String,
      value:"rgb(0, 204, 0)"
    },
    //进度文字颜色
    textColor:{
      type:String,
      value:"#fff"
    },
    //轨道颜色
    trackColor:{
      type:String,
      value:"#e5e5e5"
    }

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

html样式

<view class="progress-bar-area" style="background-color: {{trackColor}};">
  <view class="progress-bar" style="background-color: {{barColor}};width: {{(percentage>100?100:percentage)+'%'}}"></view>
  <view class="bar-text" style="color: {{textColor}};">{{percentage}}%</view>
</view>