css笔记

1.动态显示点击tab添加类名

<template>
	<view>
		<scroll-view class="scroll-view_H" scroll-x="true" enable-flex="true" @scroll="scroll" scroll-left="160">
			<view v-for="(item,index) in data" :key="index" class="scroll-view-item_H"  >
					<view class="scroll-view-img" :class="{action:is_index==index}" @click="on_scroll(index)">
					
					</view>
					<view class="scroll-view-text" :class="{action_text:is_index==index}">
						{{item.name}}
					</view>
			</view>
		</scroll-view>
	</view>
</template>

export default {
	data() {
		return {
			
			is_index: '5',//当前显示哪个三级分类
			data: [{
					name: '男式男式'
				}, {
					name: '男式运动'
				}, {
					name: '女士运动'
				}, {
					name: '女士运动'
				}, {
					name: '女士运动'
				}, {
					name: '男士运动'
				},
				{
					name: '男式户外'
				}, {
					name: '男式运动'
				}, {
					name: '女士运动'
				}, {
					name: '女士运动'
				}, {
					name: '女士运动'
				}, {
					name: '男士运动'
				}
			]
		}
	},
	//传进来三级页面的id,然后匹配判断所有三级分类的id和传过来的.
	//然后记录当前的is_index =index,便可以显示当前的三级选项
	onLoad() {
		
	},
	methods: {
		on_scroll(index) {
			this.is_index = index
			console.log(this.is_index)
		}
	}
}