脚本宝典收集整理的这篇文章主要介绍了uniapp如何实现选项卡功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
uniapP实现选项卡功能的方法:首先写一个外框,把选项卡固定在顶部使用【display: flex】;然后使用三目运算分别赋一个排序,如果选中则添加【inv-h-se】样式;最后写2个不同的容器,使用【v-show】来切换。
本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。
uniapp实现选项卡功能的方法:
步骤说明:
1、先写一个外框,在抒写2个内容,先把选项卡固定在顶部使用display: flex
;,随后写2个不同的样式去区分选中和未选择
2、三目运算分别给他们赋一个排序,点击的时候获取是第一个还是第二个,如果选中则添加inv-h-se样式
3、return中默认显示第一个
4、最后写2个不同的容器,使用v-show
来切换
<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">我是选项卡二</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: #5BA7FF;border-bottom: 4upx solid #5BA7FF;} page{background-color: #f2F2F2;} </style>
效果如图:
相关免费学习推荐:编程视频
以上就是uniapp如何实现选项卡功能的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的uniapp如何实现选项卡功能全部内容,希望文章能够帮你解决uniapp如何实现选项卡功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。