uniapp-微信小程序关于禁止ios自带的下拉上拉(橡皮筋回弹)
微信小程序禁止 ios 自带的下拉上拉回弹
·
先说出现的问题,如下图所示,下拉出现空白,上拉也会出现一段空白。
要求:这个页面不能拉动,并且保证 如果内容超出,可以正常滑动,内容不超出也禁止ios自带的拉动
解决办法:分两步
第一步:在pages.json里添加这行代码,如下图所示,但是 如果你的页面内容很多,有滑动的东西,写完这行代码 整个页面 都不会动了,别着急,第二步就是解决办法
"disableScroll": true
第二步:直接看代码,实际内容不多。主要代码是下面两行
<scroll-view scroll-y="true" class="content" :enhanced="true"
:bounces="false" :show-scrollbar="false"><!-- 主要是用 scroll-view 标签包裹住内容 -->
</scroll-view>
.content{
//可视高度,需要在多大的盒子中进行滑动
height: 100vh;
width: 750rpx;
}
注:如果页面有弹窗,最好写在scroll-view外边
<template>
<view>
<scroll-view scroll-y="true" class="content" :enhanced="true"
:bounces="false" :show-scrollbar="false">
<view style="height:500rpx">
以下模拟内容,你页面的很多很多内容
</view>
<br>
<view style="height:500rpx"> 内容</view>
<br>
<view style="height:500rpx"> 内容</view>
<br>
<view> 内容</view>
<view> 内容</view>
<view> 内容</view>
<view> 内容</view>
<view style="height:500rpx"> 内容</view>
<view style="height:500rpx"> 内容</view>
<br>
<view> 内容</view>
</scroll-view>
</view>
</template>
<script>
</script>
<style>
.content{
//可视高度,需要在多大的盒子中进行滑动
height: 100vh;
width: 100%;
}
</style>
解决。
注:scroll-view 标签 结合第一步,可以完美禁止ios自带的橡皮筋回弹。内容少时,"disableScroll": true生效,内容多时,有第二步。
更多推荐
已为社区贡献9条内容
所有评论(0)