【转】uni-app新手如何实现一个简单的选项卡
原文来自：https://www.frbkw.com/1919/欢迎来到自学程序员掉头发之uni-app如何实现一个简单的选项卡，Uni-app中有一个模板叫分段器（segmented-control）如果我们使用模板的时候呢需要修改一些东西，
当一个不会vue和js的小白去问大佬的时候，他们总会说一句，这个自己写一个模板不就好了吗
食用基础：
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>
实例
<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> 求楼主一些个 图片的懒加载插件呗~ ~ zhengpengxin 发表于 2019-8-30 07:45
求楼主一些个 图片的懒加载插件呗~ ~
我只是新手，这个恐怕有难度哦
页:
[1]