uni-app 微信小程序页面加了movable-view后手机ipone8Plus上无法上下滚动需长按才行开发者工具上正常

示例代码：

<template>
<view class="content">
<movable-area scale-area>
<movable-view :inertia="true" :scale="true" :out-of-bounds="true" scroll-y
scale-min="0.9" scale-max="2" direction="vertical" @change="onMove" @scale="onScale">
<view class="item" v-for="(item,index) in 100">{{index}}</view>
</movable-view>
</movable-area>
</view>
</template>  
<script>  
export default {  
data() {  
return {  
title: 'Hello'  
}  
},  
onLoad() {  
},  
methods: {  
onMove(e){  
},  
onScale(){  
}  
}  
}  
</script>  
<style>  
movable-area {  
width: 100%;  
height: 1920rpx;  
pointer-events: none;  
}  
movable-view {  
width: 100%;  
height: 1920rpx;  
pointer-events: auto;  
}  
.item{  
width: 750rpx;  
height: 66rpx;  
line-height: 66rpx;  
text-align: center;  
}  
</style>

操作步骤：

ipone8Plus手机直接运行

预期结果：

可以页面正常滚动

实际结果：

页面不可以正常滚动

bug描述：

微信小程序页面加了movable-view之后页面在手机上无法上下滚动，需要长按才可以上下滑动，但是在开发者工具上可以上下滑动，在手机ipone8Plus手机上

sinazl 1楼•4 天前

麻烦回复一下呢谢谢

phonegap100 2楼•4 天前

验证下原生小程序是否存在此问题，如有问题请向微信开发者社区反馈。

sinazl 3楼•4 天前

你们这边没法判断问题原因吗？

yibo5220 4楼•4 天前

回复叫我红领巾: 这种一般是微信小程序的问题

gougou168 5楼•4 天前

在 uni-app 开发微信小程序时，如果遇到在 iPhone 8 Plus 上无法正常上下滚动页面，而在开发者工具上正常的情况，可能是由于 movable-view 组件的使用导致了一些兼容性问题。以下是一些可能的解决方案和排查步骤：

1. 检查 `movable-view` 的配置

确保 movable-view 的配置没有影响到页面的滚动行为。例如，movable-view 的 direction 属性是否设置为 all，这可能会导致页面滚动被拦截。

<movable-view direction="all">
  <!-- 内容 -->
</movable-view>

如果 direction 设置为 all，尝试将其改为 horizontal 或 vertical，看看是否能解决问题。

2. 检查 `movable-area` 的大小

确保 movable-area 的大小没有覆盖整个页面，导致页面滚动被拦截。movable-area 应该只包含 movable-view 的区域，而不是整个页面。

<movable-area style="width: 100px; height: 100px;">
  <movable-view direction="all">
    <!-- 内容 -->
  </movable-view>
</movable-area>

3. 检查页面滚动设置

确保页面的滚动设置没有被 movable-view 影响。可以在页面的 json 文件中设置 "disableScroll": false，确保页面可以滚动。

{
  "disableScroll": false
}

4. 使用 `scroll-view` 替代 `movable-view`

如果 movable-view 的功能不是必须的，可以考虑使用 scroll-view 来实现类似的效果。scroll-view 是专门用于处理滚动内容的组件，兼容性更好。

<scroll-view scroll-y="true" style="height: 100vh;">
  <!-- 内容 -->
</scroll-view>

5. 检查 CSS 样式

检查是否有 CSS 样式影响了页面的滚动行为。例如，overflow: hidden 或 position: fixed 等样式可能会导致页面无法滚动。

6. 使用 `touch` 事件手动处理滚动

如果以上方法都无法解决问题，可以尝试手动处理 touch 事件来实现滚动。通过监听 touchstart、touchmove 和 touchend 事件，手动计算滚动距离并更新页面内容的位置。

Page({
  data: {
    startY: 0,
    scrollTop: 0
  },
  onTouchStart(e) {
    this.setData({
      startY: e.touches[0].clientY
    });
  },
  onTouchMove(e) {
    const deltaY = e.touches[0].clientY - this.data.startY;
    this.setData({
      scrollTop: this.data.scrollTop - deltaY
    });
  },
  onTouchEnd(e) {
    // 处理滚动结束后的逻辑
  }
});

7. 更新 `uni-app` 和微信开发者工具

确保你使用的是最新版本的 uni-app 和微信开发者工具。旧版本可能存在一些已知的兼容性问题，更新到最新版本可能会解决这些问题。

8. 使用 `page-meta` 组件

在微信小程序中，可以使用 page-meta 组件来设置页面的元信息，包括滚动行为。确保 page-meta 的配置没有影响到页面的滚动。

<page-meta>
  <navigation-bar title="页面标题" />
  <scroll-view scroll-y="true" style="height: 100vh;">
    <!-- 内容 -->
  </scroll-view>
</page-meta>

uni-app 微信小程序 页面加了movable-view后手机ipone8Plus上无法上下滚动需长按才行 开发者工具上正常