当前位置：首页 > news >正文

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

news 2025/7/5 1:56:49

自定义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;}}

查看全文

http://www.lryc.cn/news/507285.html