vue自定义实现tab选项卡切换效果,vue自定义实现tab选项卡切换滚动效果

 一、vue自定义实现tab选项卡切换效果

<template>
	<view>
		<view class="tabs">
			<view class="item-tab" v-for="(item,index) in tabsList" :key="index" @click="tabChange(index)">
				<view>{
  
   
   {item.name}}</view>
				<view :class="currentTab==index?'border':''"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsList: [{
						name: '推荐'
					},
					{
						name: '最新需求'
					},
					{
						name: '最新需求'
					},
				],
				currentTab: 0
			}
		},
		methods: {
			tabChange(index) {
				this.currentTab = index;
			}

		}
	}
</script>

<style lang="scss">
	.

猜你喜欢

转载自blog.csdn.net/qq_39695210/article/details/129129083