uniapp-微信小程序关于禁止ios自带的下拉上拉（橡皮筋回弹）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp-微信小程序关于禁止ios自带的下拉上拉（橡皮筋回弹）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先说出现的问题，如下图所示，下拉出现空白，上拉也会出现一段空白。

要求：这个页面不能拉动，并且保证如果内容超出，可以正常滑动，内容不超出也禁止ios自带的拉动

小程序阻止ios页面回弹,uni-app,微信小程序

解决办法：分两步

第一步：在pages.json里添加这行代码，如下图所示，但是如果你的页面内容很多，有滑动的东西，写完这行代码整个页面都不会动了，别着急，第二步就是解决办法

"disableScroll": true

小程序阻止ios页面回弹,uni-app,微信小程序

第二步：直接看代码，实际内容不多。主要代码是下面两行

<scroll-view scroll-y="true" class="content" :enhanced="true"
:bounces="false" :show-scrollbar="false">


</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生效，内容多时，有第二步。文章来源地址https://www.toymoban.com/news/detail-520498.html

到了这里，关于uniapp-微信小程序关于禁止ios自带的下拉上拉（橡皮筋回弹）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！