需求:小程序开发中UI设计稿给的样式如下:
选中的样式中没有上下边框,一般picker-view中选中行都有两条灰色的上下边框,如下:
那如何修改或者去掉这个border呢?其实这个边框是写在::before,::after伪类上的,只要在这两个样式重写即可。
<picker-view
indicator-style="background: rgba(0, 0, 0, 0.03);height:76rpx;line-height:76rpx;"
indicator-class="select-line"
class="city-picker"
:value="value"
@change="bindChange"
>
<picker-view-column class="view-column first">
<view
v-for="(item, index) in provinceListCol"
:key="item.id"
:class="value[0] === index ? 'select-item' : ''"
class="col-item"
>{{ item.name }}</view
>
</picker-view-column>
<picker-view-column class="view-column second">
<view
v-for="(item, index) in cityListCol"
:key="item.id"
:class="value[1] === index ? 'select-item' : ''"
class="col-item"
>{{ item.name }}</view
>
</picker-view-column>
</picker-view>
首先在picker-view上面添加indicator-class="select-line" 设置选择器中间选中框的类名,然后添加样式如下:
// 给中间选中行添加border-radius
::v-deep .view-column.second .select-line {
border-radius: 0 16rpx 16rpx 0;
}
::v-deep .view-column.first .select-line {
border-radius: 16rpx 0 0 16rpx;
}
// 修改原有的上下边框颜色
::v-deep .select-line::after {
border-bottom: 2rpx solid #fff;
}
::v-deep .select-line::before {
border-top: 2rpx solid #fff;
}
注意:需要在类名前加上deep