小程序禁止苹果手机(IOS)下拉弹动

1.catchtouchmove

根元素加上catchtouchmove="return"就可以了(PS:对cover-view无效)。

2."disableScroll": true
第一步:在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生效,内容多时,有第二步。

 

posted @   时光独醒  阅读(1204)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示