效果

完整代碼：

<template><view class="content"><view class="tab"><view class="tab-item" v-for="(item,index) in tab" :key="index" @click="handlerTab(index)":class="index==tabIndx?'selected':''">{{item}}</view></view></view>
</template><script>export default {data() {return {title: 'Hello',tab: ['蘋果', '香蕉', '蜂蜜', '巧克力', '大盤雞', '被子', '蘋果', '香蕉', '蜂蜜', '巧克力', '大盤雞', '被子'],tabIndx: 0,}},methods: {handlerTab(index) {this.tabIndx = index;}}}
</script><style lang="scss">.tab {display: flex;overflow-x: scroll;-webkit-mask: linear-gradient(90deg, #000, 70%, transparent);.tab-item {flex-shrink: 0;margin: 0 5px;padding: 5px 10px;border-radius: 20px;border: 1px solid #f1f1f1;}}// 隱藏滾動條.tab::-webkit-scrollbar {display: none;}.selected {background-color: #f9ea16;}
</style>