index.nvue 横向滚动顶部选项卡

利用week的scroller组件

<div class="w-100" style="height: 75px;">
		<scroller class="w-100 flex-row" style="height: 75px;" :show-scrollbar="false" scroll-direction="horizontal">
			<!-- show-scrollbar是否显示滚动 scroll-direction滚动方向-->
			<div style="height: 75px;width: 120px;" class="a-center j-center" v-for="(item,index) in tabBars" :key="index"
			 @click="change(index)" :ref="`tab${index}`">
				<text style="height: 75px;line-height: 75px; border-bottom-width: 5px; border-style: solid;" class="font-md" :style="{'color':tabIndex ===index?'#FD6801':'#555','border-color':tabIndex === index? '#FD6801':'#FFFFFF'}">{{item.name}}</text>
			</div>
		</scroller>
</div>

点击选项卡事件

大概示意如下：