当swiper高了,swiper嵌套的列表能滚动,整个页面也能滚动,导致上面的筛选和tab选项卡也能跟着页面滚动,非常难看:

当swiper矮了,swiper里面的列表显示不全,滚动起来,会发现字显示不全:

最后用js动态计算高度解决:
1、给swiper上面的tab和筛选套个view,不管里面内容是什么,直接计算这个view的高度:
<view ref='top'>
<view>
<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
<view class="pt20 pb20">
<view class="search-tab flex flex-middle flex-between white-bg">
<label>筛选</label>
<hxz-select label="所属工会" :list="ssghList" inputWidth="150" maxWidth="600" @getBackVal="getBackVal1"></hxz-select>
<hxz-select label="申请人" :list="sqrList" inputWidth="100" maxWidth="600" @getBackVal="getBackVal2"></hxz-select>
<span @tap="showCalendar = true">{{applyDate}}</span>
<span @tap="showIdCard = true">{{idCard}}</span>
</view>
</view>
</view>
2、给swiper赋值动态boxHeight高度
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: boxHeight}">
<swiper-item class="swiper-item">
<scroll-view scroll-y :style="{height: boxHeight}" @scrolltolower="onreachBottom">
<ArchivesTab1 />
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y :style="{height: boxHeight}" @scrolltolower="onreachBottom">
<ArchivesTab2 />
</scroll-view>
</swiper-item>
</swiper>
3、在data里面定义boxHeight,这个初始高度值无所谓,后面会计算,重置它
data() {
return {
boxHeight: '80vh',
}
},
4、动态计算高度
mounted() {
uni.getSystemInfo({
success: (res) => {
let topHeight = this.$refs.top.$el.offsetHeight;
let winHeight = res.windowHeight;
// boxHeight为 屏幕高度 - 顶部高度
this.boxHeight = winHeight - topHeight + 'px';
}
});
},
测试了几个手机,都非常完美:
