先来讲下主体思路:每个tab页(swiper-item)都嵌套在swiper中,swiper-item中在放置一个scroll-view,实现超出部分滑动;即让swiper、scroll-view高度都占满屏幕剩余部分
<–template部分–>
这里的:style="{height:swiperheight+‘px’}"是设置他动态的的高度
这里用scroll-view是把要设置自适应高度的地方包起来
<swiper-item>
<view class="swiper-item">
<scroll-view scroll-y="true" :style="{height:swiperheight+'px'}">
<view class="box" style="height: 100%;">
<view >
这里是内容
</view>
</view>
</scroll-view>
</view>
</swiper-item>
<–data部分–>
data(){
return{
swiperheight:0,//这里是动态赋值的高度
}
},
<–methods部分–>
这里用到uniapp的API函数uni.getSystemInfo
// 调用方法获取到设备的可用高度
uni.getSystemInfo({
success: (res) => {
// uni-app 提供了 upx2px 方法,将对应的 rpx 值转换成了 px
let height = res.windowHeight - uni.upx2px(100)
this.swiperheight = height; // 让data中定义的swiperheight高度等于计算过后的高度
console.log(this.swiperheight)
}
});
完成上面的步骤就可以愉快的滚动屏幕啦,下面附两张uni.getSystemInfo的API截图
官方uni.getSystemInfo连接uni.getSystemInfo