通过uni-ui库实现滑动选项卡切换tab页，一般用于app上

原创已于 2023-02-21 16:15:41 修改 · 992 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #javascript

收录于

于 2023-02-21 16:15:00 首次发布

uniapp 专栏收录该内容

2 篇文章

订阅专栏

该文展示了如何利用swiper组件在Vue.js中创建选项卡切换功能。通过数据绑定和事件监听，可以改变swiper的当前索引，从而切换不同的swiper-item内容。同时，文章包含了动态样式应用和点击事件处理方法。

原理是通过 swiper 组件来实现，通过事件对象切换索引即可

swiper-item则是每个选项卡。实例代码

<template>
	<view>
		
		<view class="myTabs" style="display: flex; flex-direction: row; justify-content: space-around;">
			<view :key="0" :class="{'activedTab':activedTab == 0}" @click="activedTab = 0">
				第一类
			</view>
			<view :key="1" :class="{'activedTab':activedTab == 1}" @click="activedTab = 1">
				第二类
			</view>
		</view>
		
		<view style="height: 60rpx; background-color: #A5A5A5;">
			
		</view>
		
		<swiper :current="activedTab" :autoplay="false" :duration="300" @change="changeContentBox">
			<swiper-item>
				<view>
					第一屏内容 
				</view>
				<view>
					当前activedTab =  {{activedTab}}
				</view>
			</swiper-item>
			
			
			<swiper-item>
				<view>
					第二屏内容 
				</view>
				<view>
					当前activedTab =  {{activedTab}}
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				activedTab: 0
			}
		},
		methods: {
			changeContentBox(e){
				this.activedTab = e.detail.current
			}
		},
		onLoad () {
			
		}
	}
</script>
 
<style>
	.activedTab {
		font-size: 50rpx;
		color: red;
		font-weight: bold;
	}
</style>

样式自己修改