先上最终实际效果图,如下:

我们在用 uni-app 开发前端时,经常会用到类似上图的标题分割线。这种效果实现起来不难,可以通过 CSS3 的背景渐变来实现。具体实现方式如下:

HTML 代码:

<view class="title-split">
    <view></view>
    <text>猜你喜欢</text>
    <view></view>
</view>

SCSS 代码:

.title-split {
    margin: 48rpx 0 28rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
        color: #161616;
        font-weight: 500;
        font-size: 30rpx;
        padding: 0 24rpx;
    }
    view {
        width: 98rpx;
        height: 4rpx;
        border-radius: 3rpx;
        &:first-of-type {
            background: linear-gradient(90deg, rgba(98, 98, 98, 0) 0%, #333333 100%);
        }
        &:last-of-type {
            background: linear-gradient(90deg, #333333 0%, rgba(98, 98, 98, 0) 100%);
        }
    }
}