u-view 2.0 实现tab栏切换_uview tabs

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

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

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

 因为swiper高度默认150px，swiper-item高度是100%,起初想让swiper-item中的内容吧swiper-item和其父元素高度撑开，理应将height设置成auto但是swiper的高度auto可以设置成功，但是swiper-item高度设置了auto始终是不成功（开发者工具中styles中显示出了但是就是不生效）但是！！给swiper标签设置高度100%是可以的（这里注意swiper的所有父级高度是否设置，如果没设置那么swiper的高度100%没有意义），到这里也就是说 图二这种全页面的tabs 可以给swiper设置高度100%，其余比如图一那种半个页面或者部分页面是tabs的这种，必须通过js去计算内容高度，可以看我另一篇文章​​​​​​​，然后赋值给swiper。至于在swiper是否使用scroll-view，取决于下拉刷新的需求，使用scroll-view的好处是可以自定义下拉刷新的位置，以为我们知道原生的下拉刷新的位置在navbarr下面，几乎是页面最上面，而使用scroll-view后可以控制下拉刷新的位置在tab下面。类似下图,

<div style="height:100%;">
 
    <div>
	    <u-sticky bgColor="#fff">
	        <u-tabs :list="list1" ref="uTabs" :current="currentNum" lineHeight="6"     @change="tabsChange">
            </u-tabs>
	    </u-sticky>
    </div>
 
    <div style="height:100%;">
	    <swiper :current="swiperCurrent" @change="transition" style="height:100%;">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;"     @scrolltolower="onreachBottom">
						    {{item.value}}
			       		</scroll-view>
	    		</swiper-item>
	    </swiper>
    </div>
 
</div>
 

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博客