uView u-subsection分段器样式 + 第一个和最后一个选项样式设置(源码)

<!-- 这个属性定位太难定位到了,对照着源码改会稍微快一点。
   改了分段器的高度,非选中的圆角值和选中的圆角值 -->

<
template> <!-- 只展示必要属性 分段器模式 mode 为 subsection --> <u-subsection mode="subsection"></u-subsection> </template> <style scoped> /* subsection样式 */ .u-subsection { height: 70rpx; /* subsection 高度 */ } ::v-deep .u-subsection__item { border-color: #E6E6E6 !important; /* 每个选项的边框颜色 */ } /* 第一个选项:设置圆角 上左 + 下左 */ ::v-deep .u-subsection__item--first { border-top-left-radius: 15rpx; border-bottom-left-radius: 15rpx; } /* 最后一个选项:设置圆角 上右 + 下右 */ ::v-deep .u-subsection__item--last { border-top-right-radius: 15rpx; border-bottom-right-radius: 15rpx; } /* subsection 选项选中时 */ ::v-deep .u-subsection .u-subsection__bar { background-color: #6599FF !important; /* 每个选项的选中颜色 */ } /* 第一个选项选中样式:设置圆角 上左 + 下左 */ ::v-deep .u-subsection .u-subsection__bar--first { border-top-left-radius: 17rpx; border-bottom-left-radius: 17rpx; } /* 最后一个选项选中样式:设置圆角 上右 + 下右 */ ::v-deep .u-subsection .u-subsection__bar--last { border-top-right-radius: 17rpx; border-bottom-right-radius: 17rpx; } </style>
源码对应位置:
分段器整体高度,模式 mode 为 subsection 时,官方默认给30px
posted @ 2025-08-28 20:19  游戏三昧的木笔  阅读(82)  评论(0)    收藏  举报