首页 » Uni-app » uni-app新手如何实现一个简单的选项卡

欢迎来到自学程序员掉头发之uni-app如何实现一个简单的选项卡,Uni-app中有一个模板叫分段器(segmented-control)如果我们使用模板的时候呢需要修改一些东西,当一个不会vue和js的小白去问大佬的时候,他们总会说一句,这个自己写一个模板不就好了吗!(送上一张好看的电脑壁纸,喜欢的小伙伴块下载)

uni-app新手如何实现一个简单的选项卡

食用基础:

1.v-show显示隐藏

2.click点击事件

3.三目运算

 

步骤说明:

1.先写一个外框,在抒写2个内容,先把选项卡固定在顶部使用display: flex;,随后写2个不同的样式去区分选中和未选择

<view class="inv-h-w">
	<view class="inv-h-se">开具发票</view>
	<view class="inv-h">开票记录</view>
</view>
.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: #FF9014;border-bottom: 4upx solid #FF9014;}

2.三目运算分别给他们赋一个排序,点击的时候获取是第一个还是第二个,如果选中则添加inv-h-se样式

<view class="inv-h-w">
	<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">开具发票</view>
	<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">开票记录</view>
</view>

3.return中默认显示第一个

return {
	Inv:0,
}

4.最后写2个不同的容器,使用v-show来切换

<view class="" v-show="Inv == 0"> 
	我是选项卡一 
</view> 
<view class="" v-show="Inv == 1"> 
	我是选项卡二 
</view>

 

实例

uni-app新手如何实现一个简单的选项卡 (小小效果图)

<template>
	<view>
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">开具发票</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>
	export default {
		data() {
			return {
				Inv:0
			}
		},
		methods: {
			changeTab(Inv){
				that.navIdx = Inv;
				
			},
		}
	}
</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: #FF9014;border-bottom: 4upx solid #FF9014;}
	page{background-color: #F2F2F2;}
</style>

 

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《uni-app新手如何实现一个简单的选项卡》 发布于2019-08-29

赞(0) 生成海报

评论 1

9 + 8 =

长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....