Uniapp选项卡切换（有图示例）

冷酷吗喽

已于 2024-04-08 09:49:32 修改

阅读量585

点赞数

分类专栏： uniapp 文章标签： uni-app

于 2022-12-05 10:25:41 首次发布

本文链接：https://blog.csdn.net/m0_72189003/article/details/128182304

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<template>
<view>
  <view class="inv-h-w">

                        <view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">选项卡1</view>
                        <view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">选项卡2</view>
						<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="Inv=2">选项卡3</view>

                </view>
				<view class="" v-show="Inv == 0">
				1
				</view>
				<view class="" v-show="Inv == 1">
				2
				</view>
				<view class="" v-show="Inv == 2">
				3
				</view>
</view>
</template>

<script>
	export default{
		data (){
			return{
				  Inv:0,
			}
			methods:{
				
			}
		}
	}
</script>

<style>
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
	
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	
	.inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
</style>