转：uni-app实现一个简单的选项卡

原作者笔记连接

<template>
	
		<!-- <map style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="covers">
		                </map> -->
		<view class="content">
                <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">我是选项卡二</view>
                </view>
                <view class="" v-show="Inv == 0">
                        我是选项卡一
                </view>
                <view class="" v-show="Inv == 1">
                        我是选项卡二
                </view>
        </view>
</template>

<script>
	import mediaList from '@/components/tab-demo/components/uni-media-list/uni-media-list.nvue'
	export default {
		data() {
			return {
				 // id:0, // 使用 marker点击事件 需要填写id
				 //            title: 'map',
				 //            latitude: 39.909,
				 //            longitude: 116.39742,
				 //            covers: [{
				 //                latitude: 39.909,
				 //                longitude: 116.39742,
				 //                iconPath: '../../../static/location.png'
				 //            }, {
				 //                latitude: 39.90,
				 //                longitude: 116.39,
				 //                iconPath: '../../../static/location.png'
				 //            }]
				 //        }

                                Inv:0,
								}
		},
		onLoad() {
			 
		},
		methods: {
			navsHandleClick(i) {
			            console.log(i);
			            this.current = i;
			        },
			        intervalChange(e) {
			            this.current = e.detail.current;
			        },
					changeTab(Inv){
					                                that.navIdx = Inv;
					                                 
					                        },
					
		
	},
	}
</script>

<style>
.content{
	height: 100%;
	width: 100%;
}
.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;}
        page{background-color: #F2F2F2;}

</style>

效果图：