uni-app scroll-view组件出现内容漂移问题

uni-app scroll-view组件出现内容漂移问题

开发环境 版本号 项目创建方式
Mac 10.15.7 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10.15.7 (19H15)

HBuilderX类型：正式

HBuilderX版本号：2.9.8

手机系统：iOS

手机系统版本号：iOS 12.4

手机厂商：苹果

手机机型：ipad

页面类型：vue

打包方式：云端

App下载地址或H5网址：
[https://stylist2017-1252470632.cos.ap-shanghai.myqcloud.com/resources/miniPrograms/assets/bug/bug.mov](https://stylist2017-1252470632.cos.ap-shanghai.myqcloud.com/resources/miniPrograms/assets/bug/bug.mov)

### 示例代码：

复现代码，这个链接可以看到漂移的问题
[https://stylist2017-1252470632.cos.ap-shanghai.myqcloud.com/resources/miniPrograms/assets/bug/bug.mov](https://stylist2017-1252470632.cos.ap-shanghai.myqcloud.com/resources/miniPrograms/assets/bug/bug.mov)

```html
<template>  
    <view>  
        <scroll-view scroll-x="true" scroll-y="true">  
            <view class="box">  
                <text v-for="item in 1000" :key="item">这是内容</text>  
            </view>  
        </scroll-view>  
    </view>  
</template>  

<script>  
</script>  

<style lang="scss">  
    scroll-view{  
        width: 500px;  
        height: 500px;  
        border: 1px solid red;  
    }  
    .box{  
        background-color: #F5F5F5;  
        width: 2000px;  
        height: 2000px;  
    }  
</style>

操作步骤：

复现代码如上


### 预期结果：

正常手机滑动的时候 应该是只会横向滚动 或者 纵向滚动 不要出现可以任意方向滚动

实际结果：

代码复现的结果是可以随意哪个方向滑动内容


### bug描述：

1.h5和app都会出现这个问题,
2.scroll-view组件 横向和纵向都设置允许滚动后，scroll-view子组件的内容区域就可以任意方向滑动内容(并不是横向或者纵向滚动)

更多关于uni-app scroll-view组件出现内容漂移问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

亲，您误会了！就是这样设计的。 这不是bug，效果是与微信小程序一致的。 如果要实现你自己描述的效果需要自己判断滚动方向，然后动态设置滚动方向哦。

更多关于uni-app scroll-view组件出现内容漂移问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


额。。。为啥会这样，不太正常呀，这个逻辑

回复 Potato1314: 你需要的效果只是你的“主观狭义”，底层来说是得都开放，来满足开发者的各种需求！

回复 DCloud_uniCloud_JSON: 好的，要是官方也能支持这种就更好了，谢谢您的回答

scroll-view组件同时开启横向和纵向滚动时出现内容漂移的问题，主要是由于iOS系统的弹性滚动特性导致的。以下是解决方案：

  1. 对于iOS设备，可以添加以下CSS样式禁用弹性滚动：
scroll-view {
    -webkit-overflow-scrolling: auto;
}
  1. 如果需要更精确的控制滚动方向，建议分开处理横向和纵向滚动，避免同时开启两个方向的滚动：
<scroll-view scroll-x="true" scroll-y="false" class="horizontal">
    <scroll-view scroll-x="false" scroll-y="true" class="vertical">
        <!-- 内容 -->
    </scroll-view>
</scroll-view>
  1. 另一种方案是使用touch事件手动控制滚动方向：
methods: {
    handleTouchMove(e) {
        // 判断滑动方向，只允许单向滚动
        const angle = Math.atan2(e.touches[0].clientY - this.startY, e.touches[0].clientX - this.startX) * 180 / Math.PI;
        if (Math.abs(angle) > 45) {
            // 垂直滚动
        } else {
            // 水平滚动
        }
    }
}
回到顶部