行内存放数据属性data-id

data-*='data'为行内存放数据的属性，可通过事件源中的currentTarget.dataset获取data-*存放的值
另外css可通过 data-*放置的标签名[data-*='data']设置

<template>
	<view>
		<scroll-view scroll-x class="bg-white nav" :scroll-left="scrollLeft">
			<view class="view-item" :class="index==tabCur?'color-orger':''" v-for="(item,index) in tabNav" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{tabNav[index]}}
			</view>
		</scroll-view>
		<view v-for="(item,index) in tabNav" :key="index">
			<view v-if="tabCur==index" class='margin-90'>{{index}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabNav:['标题0','标题1','标题2','标题3','标题4','标题5'],
				scrollLeft:0,
				tabCur:0,
			}
		},
		mounted() {
		},
		methods: {
			tabSelect(e){
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (this.tabCur - 1) * 60
			}
		}
	}
</script>

<style>
	view[data-id='0']::before{
		content: '√ ';
	}
	
	.margin-90{ margin-top: 90rpx; }
	.color-orger{ color: #F0AD4E; }
	.bg-white{
		background-color: white;
		color: #808080;
	}
	.nav{
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
		text-align: center;
	}
	.view-item{
		height: 90rpx;
		display: inline-block;
		line-height: 90rpx;
		margin: 0 10rpx;
		padding: 0 20rpx;
	}
</style>

待续。。。