uni-app 安卓app内swiper组件滑动卡顿

uni-app 安卓app内swiper组件滑动卡顿

操作步骤：

无

预期结果：

视频播放列表上下滑动不会卡顿

实际结果：

图片内是两个视频，滑动后应该swiper全屏显示一个视频才对，目前情况是滑动后卡在了两个视频的中间

bug描述：

Hbuilder开发安卓app，swiper内嵌入video组件的话，上下滑动会出现卡顿的情况，并且swiper-item组件有时会卡在屏幕中间。swiper滑动也没有小程序丝滑

信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 26100.3194
HBuilderX类型 正式
HBuilderX版本号 4.45
手机系统 Android
手机系统版本号 Android 11
手机厂商 模拟器
手机机型 安卓
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

图片


更多关于uni-app 安卓app内swiper组件滑动卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

插件市场里有很多这种类似的插件 你可以试试 有些插件做的很丝滑 插件市场：https://ext.dcloud.net.cn/search?q=抖音

更多关于uni-app 安卓app内swiper组件滑动卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对uni-app安卓应用中swiper组件滑动卡顿的问题，以下是可能的原因和解决方案：

  1. video组件性能问题：

    • video组件在安卓平台性能开销较大，建议设置object-fit="cover"减少渲染压力
    • 添加`:
    <video 
  :controls="false"
  :autoplay="false"
  :show-play-btn="false"
  :enable-progress-gesture="false"
></video>

  2. swiper优化配置：

    <swiper 
  :duration="300"
  :circular="false"
  :vertical="true"
  :disable-touch="false"
>

  3. 页面层级优化：

    • 检查是否有过多的页面元素叠加
    • 避免在swiper-item中使用复杂布局

  4. 硬件加速： 在页面样式中添加：

    .swiper-container {
  transform: translateZ(0);
  will-change: transform;
}
回到顶部