css 案例 横向滚动渐变

效果

完整代码：

<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>