uniapp-scroll-view滑动限制

1、需求：scroll-view滑动时，不应将导航栏卷上去。

2、技术点：scroll-view、uni.getSystemInfo(OBJECT)、uni.upx2px()

3、实现效果

4、实现思路：

查询当前设备的屏幕高度-去导航栏高度，将其赋值给scroll-view的height

5、代码实现

//滑块内容区
//动态添加style样式给高度
<swiper :style="'height:'+ mainH" :current="num" @change="changeTba" class="swper-view">
//遍历导航栏页面数据长度，实现导航栏对应数量的滑动
	<block v-for="(item,index) in newsList" :key="index">
		<swiper-item>
			<scroll-view scroll-y :style="'height:' + mainH" @scrolltolower="toBottom()">
				<template>
					//轮播图组件，只需在components中新建即可使用,父传子
					<swiper-banner :item="item" v-if="item.type == 'swiper'"></swiper-banner>
				</template>
			</scroll-view>
		</swiper-item>
	</block>
</swiper>

created() {
// 调用uniapp的api获取系统信息,如浏览器可视区高度
// 实现向下滑动,只有内容区可以滑动
	uni.getSystemInfo({
		success: (res) => {
			// 将upx转换成px
			// 可视区高度减去导航栏高度
			this.mainH = res.windowHeight - uni.upx2px(148) + 'px';
			console.log(this.mainH)
		}
	})
},