uni-app打包h5后，在安卓手机（webview）上线滑动时，swiper开启边界回弹，安卓端上拉未出现回弹且未触发transition方法

uni-app打包h5后，在安卓手机（webview）上线滑动时，swiper开启边界回弹，安卓端上拉未出现回弹且未触发transition方法

开发环境 版本号 项目创建方式
Windows 3.4.7 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

浏览器平台：手机系统浏览器

浏览器版本：app版本

操作步骤：

<swiper class="lock-swiper_container"
vertical="true"
circular="false"
current="0"
easing-function="easeOutCubic"
[@animationfinish](/user/animationfinish)='swiperAnimationfinish'
[@transition](/user/transition)="swiperTouchMove"  
>
<swiper-item>  
<scroll-view  
scroll-top="sc_top"
enhanced="true"
scroll-y="true"
show-scrollbar="true"
class="lock-content_r_scroll"
[@scrolltolower](/user/scrolltolower)="onBottmonR()"  
>
<block v-if="tempGoodsList.length">
<block v-for="(groupItem, groupIndex) in tempGoodsList" :key="groupIndex">
<view>{{ groupItem }}</view>
</block>
</block>
</scroll-view>
</swiper-item>
</swiper>

更多关于uni-app打包h5后，在安卓手机（webview）上线滑动时，swiper开启边界回弹，安卓端上拉未出现回弹且未触发transition方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢您的反馈，我们排查一下，已加分

更多关于uni-app打包h5后，在安卓手机（webview）上线滑动时，swiper开启边界回弹，安卓端上拉未出现回弹且未触发transition方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，如果你在打包成 H5 后，在安卓手机的 WebView 中遇到 Swiper 组件边界回弹效果不生效，并且上拉时未触发 transition 方法的问题，可能是由于以下原因导致的：

1. WebView 的默认行为

安卓的 WebView 默认会处理页面的滚动行为，可能会与 Swiper 的滚动行为冲突，导致 Swiper 的边界回弹效果不生效。

2. Swiper 配置问题

Swiper 的配置可能没有正确设置，导致边界回弹效果无法正常触发。

3. CSS 样式问题

某些 CSS 样式可能会影响 Swiper 的滚动行为，导致边界回弹效果失效。

解决方案

1. 禁用 WebView 的默认滚动行为

你可以在 pages.json 中为页面配置 disableScroll: true，以禁用 WebView 的默认滚动行为：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "disableScroll": true
      }
    }
  ]
}

2. 检查 Swiper 配置

确保 Swiper 的配置中启用了边界回弹效果。你可以在 Swiper 的配置中设置 bounce 参数：

<template>
  <swiper :bounce="true">
    <swiper-item>Slide 1</swiper-item>
    <swiper-item>Slide 2</swiper-item>
    <swiper-item>Slide 3</swiper-item>
  </swiper>
</template>

3. 检查 CSS 样式

确保 Swiper 的父容器没有设置 overflow: hidden 或其他可能影响滚动的样式。你可以为 Swiper 的父容器设置 height: 100%，并确保 Swiper 的容器能够正常滚动。

4. 使用 @touchmove 事件

如果 Swiper 的边界回弹效果仍然不生效，你可以尝试手动监听 touchmove 事件，并在事件中阻止默认行为：

<template>
  <div @touchmove="handleTouchMove">
    <swiper :bounce="true">
      <swiper-item>Slide 1</swiper-item>
      <swiper-item>Slide 2</swiper-item>
      <swiper-item>Slide 3</swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  methods: {
    handleTouchMove(event) {
      event.preventDefault();
    }
  }
}
</script>

5. 使用 scroll-view 替代 Swiper

如果 Swiper 的边界回弹效果仍然无法正常触发，你可以考虑使用 scroll-view 组件来实现类似的效果：

<template>
  <scroll-view scroll-y="true" class="scroll-view" [@scrolltolower](/user/scrolltolower)="onScrollToLower">
    <div class="content">
      <!-- 内容 -->
    </div>
  </scroll-view>
</template>

<script>
export default {
  methods: {
    onScrollToLower() {
      console.log('滚动到底部');
    }
  }
}
</script>

<style>
.scroll-view {
  height: 100vh;
}
.content {
  height: 200vh; /* 内容高度 */
}
</style>
回到顶部