当swiper高了,swiper嵌套的列表能滚动,整个页面也能滚动,导致上面的筛选和tab选项卡也能跟着页面滚动,非常难看:
![](/uploads/allimg/210329/1-210329112313T3.png)
当swiper矮了,swiper里面的列表显示不全,滚动起来,会发现字显示不全:
![](/uploads/allimg/210329/1-210329112324200.png)
最后用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'; } }); },测试了几个手机,都非常完美:
![](/uploads/allimg/210329/1-210329112404Y7.png)