uniapp：uni-segmented-control 自定义布局

 自定义tabs选项，items 为tabs名称数组，横向滚动

<scroll-view scroll-x>
    <view class="segmented-control">
        <view v-for="(item, index) in items" :key="index" class="control-item "
                :class="{'active': index === activeIndex}" @click="handleActive(index)">
            <view class="custom-badge flex-end">
                <view class="custom-badge-info voerflow-text">{{item.info}}</view>
                <view class="custom-badge-txt flex-center">{{ item.name }}</view>
            </view>
        </view>
    </view>
</scroll-view>

样式： 

	.segmented-control {
			display: flex;
			// justify-content: space-around;
			white-space: nowrap;
			width: 1200rpx;
		}

		.control-item {
			padding: 10px;
			cursor: pointer;
			width: 88px;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;

			.custom-badge {
				width: 100%;

				.custom-badge-info {
					position: absolute;
					background-color: #D54941;
					padding: 10rpx;
					font-size: 20rpx;
					width: 25rpx;
					border-radius: 100%;
					margin-top: -35rpx;
					margin-right: -10rpx;
				}

				.custom-badge-txt {
					width: 100%;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}

		.active {
			color: #007aff;

			.custom-badge-info {
				color: #FFFFFF;
			}
		}