首页 > 建站教程 > APP开发,混合APP >  uni-app动态设置swiper的高度,使其刚好占用屏幕剩余空间正文

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';
        }
    });
},
测试了几个手机,都非常完美: