uni-app 仿抖音短视频小程序APP组件（超高性能）自动预加载 - 梁山伯与猪硬来在ios上无法正常上下滑动

为什么安卓能正常刷，ios 就不能上滑视频了

nodeper 1楼•4 小时前

在开发基于uni-app的仿抖音短视频小程序APP时，遇到iOS设备上无法正常上下滑动的问题，通常是由于触摸事件处理不当或性能瓶颈引起的。以下是一些针对此问题的代码优化和解决方案示例，主要聚焦于提高性能和优化触摸事件处理。

1. 禁用页面滚动条

首先，确保你的页面滚动条没有被意外禁用。在pages.json或组件的style中检查是否有overflow: hidden;的设置，这可能会阻止滚动。

// pages.json 示例
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false,
        "overflow": "scroll"  // 确保不是 hidden
      }
    }
  ]
}

2. 优化列表渲染

使用v-for渲染大量视频列表时，考虑使用infinite-scroll或分页加载来减少一次性渲染的DOM数量。

<template>
  <scroll-view scroll-y="true" @scrolltolower="loadMore">
    <view v-for="(video, index) in videos" :key="index">
      <!-- 视频组件 -->
      <video-item :video="video"></video-item>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      videos: [],
      page: 1
    };
  },
  methods: {
    loadMore() {
      this.page++;
      // 加载更多数据的逻辑
    }
  }
};
</script>

3. 使用触摸事件监听

直接监听触摸事件来确保滑动操作不被其他事件（如点击）干扰。

<template>
  <view @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <!-- 内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    onTouchStart(e) {
      this.startY = e.touches[0].clientY;
    },
    onTouchMove(e) {
      const moveY = e.touches[0].clientY;
      if (Math.abs(moveY - this.startY) > 50) {
        // 阻止其他事件
        e.stopPropagation();
      }
    },
    onTouchEnd() {
      // 释放
    }
  }
};
</script>

4. 性能优化

减少重绘和重排：尽量避免在滚动过程中修改DOM结构或样式。
使用CSS硬件加速：通过transform和opacity等属性触发硬件加速。
图片懒加载：对于视频封面图，使用v-lazy或其他懒加载策略。

5. 调试与测试

使用Safari的Web Inspector工具在iOS设备上调试。
检查控制台是否有错误或警告信息。
尝试简化页面内容，逐步排查问题来源。