小程序组件 progress 的原生样式修改

qinnzheng（郑琴）

已于 2022-08-23 14:43:01 修改

阅读量635

点赞数

分类专栏： css 小程序文章标签：小程序前端

于 2022-08-23 11:58:04 首次发布

本文链接：https://blog.csdn.net/qq_36206799/article/details/126481827

版权

小程序同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

本文介绍了如何根据设计稿在微信小程序中实现进度条的内阴影和已选择部分的弧度效果。通过修改WXML和WXSS代码，设置`wx-progress-bar`的内阴影和`wx-progress-inner-bar`的圆角，成功地匹配了设计需求。示例代码包括了一个百分比为20的进度条，背景颜色、边框半径、活动颜色和描边宽度的设定。

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

1、问题描述：

1、设计稿未选择的进度条区域需要加内阴影
2、设计稿已选择的进度条需要加弧度

2、实现效果：

在这里插入图片描述

3、wxml 代码：

<view class='progress'>
    <progress percent='20' border-radius='50px' backgroundColor='#e9e9e9' activeColor='red' stroke-width='22rpx' />
</view>

4、wxss 代码：


// 进度条的宽高
.progress {
  width: 478rpx;
  height: 22rpx;
}

// 未选择的进度条（微信内置类名）
.wx-progress-bar {
  box-shadow: inset 0 4rpx 10rpx rgba(0, 0, 0, .23);
}

// 已选择的进度条（微信内置类名）
.wx-progress-inner-bar {
  border-radius: 100rpx;
}