uniapp导航栏多个选项卡,uniapp使用

　　Uni实现tab功能的方法：先写一个外框，顶部固定tab，使用[display:flex]；然后用三元运算赋一个排序，如果选中，添加【inv-h-se】style；写入最后两个不同的容器，并使用[v-show]进行切换。

　　UNI-APP开发(仿饿)开发课程：进入学习

　　本教程运行环境：windows7系统，Uni-App版本2.5.1，Dell G3电脑。

　　uniapp实现选项卡功能的方法：

　　步骤描述：

　　1.先写个提纲，然后表达两个内容。首先在顶部固定tab，使用display:flex；然后写2个不同的样式来区分选中和未选中。

　　2.三眼操作分别给它们分配一个排序。点击时，获取第一个或第二个。如果选中，添加inv-h-se样式。

　　3.默认情况下，返回显示第一个。

　　4.最后，编写2个不同的容器，并用v-show来切换它们。

　　模板

　　视角

　　视图class=inv-h-w

　　视图：class=[inv-h ，Inv==0？Inv-h-se : ] @ click= Inv=0 tab 1/view

　　视图：class=[inv-h ，Inv==1？Inv-h-se:] @click=Inv=1 我是tab 2 /view

　　/查看

　　视图class= v-show=Inv==0

　　我是第一名

　　/查看

　　视图class= v-show=Inv==1

　　我是第二名。

　　/查看

　　/查看

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　发票：0

　　}

　　},

　　方法：{

　　变更标签(库存){

　　that.navIdx=Inv

　　},

　　}

　　}

　　/脚本

　　风格。inv-h-w { background-color:# FFFFFF；身高：100upx显示器：flex}。inv-h { font-size:30 upx；flex:1；文本对齐：居中；颜色：# C9C9C9身高：100upx行高：100upx}。inv-h-se { color:# 5ba 7 ff；border-bottom:4upx solid # 5ba 7 ff；}

　　第{ background-color:# f2f2f 2；}

　　/风格效果如图：

　　相关免费学习推荐：编程视频

　　以上就是uniapp如何实现tab功能的细节。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。