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
关于微信小程序使用swiper组件实现tab页的高度自适应的问题_鱼子酱酱酱的博客-CSDN博客
小程序 swiper 如何多页面高度自适应 - 掘金
关于微信小程序使用swiper组件实现tab页的高度自适应的问题_鱼子酱酱酱的博客-CSDN博客