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

对于选中选项的圆角样式,官方除了给第一个选项的上左和下左以及最后一个选项的上右和下右设置了3px,其余都置为0px


浙公网安备 33010602011771号