uni-app动态设置swiper的高度，使其刚好占用屏幕剩余空间

uni-app的swiper里面嵌套了列表，swiper的高度必须刚好占用除顶部tab选项卡和筛选条件高度外的屏幕剩余空间，一开始考虑用calc来计算，发现在不同的手机下还是有点问题，因为rpx也是动态计算的单位，导致不好计算，swiper不是高了，就是矮了：

当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';
        }
    });
},

测试了几个手机，都非常完美：



部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！