uni-app 滚动tab导航

比眉伴天荒 2023-02-20 15:56 6阅读 0赞

view 布局：

数据：

tabIndex:0, //默认tabIndex 为0
    tabBars:[   //tabBars数据列表
    {  name:"关注",id:"guanzhu" },
    {  name:"推荐",id:"tuijian" },
    {  name:"体育",id:"tiyu" 	  },
    {  name:"热点",id:"redian"  },
    {  name:"财经",id:"caijing" },
    {  name:"娱乐",id:"yule"    },
    ],

method方法：

tabbar点击事件，当点击某一个tabbar子项时，动态绑定样式：`:class="{'active':tabIndex==index}"`

tabtap(index){ 
    	this.tabIndex=index;
    	},

CSS样式:

.uni-swiper-tab{ 
    		border-bottom: 1upx solid #EEEEEE;
    	}
    	.swiper-tab-list{ 
    		color: #969696;
    		font-weight: bold;
    	}
    	.uni-tab-bar .active{ 
    		color: #343434;
    	}
    	.active .swiper-tab-line{   //点击事件时，tabbar样式
    		border-bottom: 6upx solid #FEDE33;
    		width: 70upx;
    		margin: auto;
    		border-top: 6upx solid #FEDE33;
    		border-radius:20upx;
    	}

运行结果  
![在这里插入图片描述][20200628091929948.png]

2.tabbars滚动导航栏，绑定页面： `:current="tabIndex"`

动态绑定页面样式：`:style="{height:swiperheight+'px'}"`

swiperheight:500 定义初始值  
计算页面高度大小：height  
uni.getSystemInfo(\{  
success: (res)=> \{  
let height=res.windowHeight-uni.upx2px(100)  
this.swiperheight=height;  
\}  
\});  
**//滑动事件**  
tabChange(e)\{  
this.tabIndex=e.detail.current;  
\}

[20200628091929948.png]: https://img-blog.csdnimg.cn/20200628091929948.png