u-view 2.0 实现tab栏切换

u-view1.0是有一个 u-tabs-swiper 使用，但是2.0没有了，所以需要用u-tabs 加上 uni提供的原生swipper实现该效果。

tab有两种情况：一种是在首页中使用如下图

另一种是整个页面只包含一个tab页面

如果是第一种就需要使用这种方式用js去给swiper设置高度，就不能用scroll-view  传送门 

如果是第二种需求的话，就使用scroll-view

	
	    
        
	



	
			
					
						{{item.value}}
					
			
	

data(){
return{
tabs: [
		{ value: '111111111111' },
		{ value: '222222222222' },
		],
ist1: [{
		name: '臻选视频',
		}, {
		name: '精选文章',
		}]
 }
}

methods: {
			// tabs通知swiper切换
			tabsChange(e) {
				this.swiperCurrent = e.index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.currentNum = e.detail.current
				console.log(e.detail.current, '-------')
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log(11111111111)
			}
		}

在此推荐以下几个链接，供大家学习参考

uni-plugins/order.vue at master · xfjpeter/uni-plugins · GitHub

自定义 tab 选项卡 2 - DCloud 插件市场

关于微信小程序使用swiper组件实现tab页的高度自适应的问题_鱼子酱酱酱的博客-CSDN博客

​​​​​​小程序 swiper 如何多页面高度自适应 - 掘金

关于微信小程序使用swiper组件实现tab页的高度自适应的问题_鱼子酱酱酱的博客-CSDN博客