小程序 uni-app picker-view改变选中行上下边框样式

本文主要是介绍小程序 uni-app picker-view改变选中行上下边框样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

需求：小程序开发中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

这篇关于小程序 uni-app picker-view改变选中行上下边框样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！