uni-app ios开启下拉刷新后swiper手动滑动会卡住不动

uni-app ios开启下拉刷新后swiper手动滑动会卡住不动

项目信息 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 11
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 iOS
手机系统版本号 iOS 17
手机厂商 苹果
手机机型 iphone14
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

index.vue代码：
```html
<swiper class='carousel_swipers' :indicator-dots="true" indicator-active-color="#fff"  
autoplay="true" interval='3000' :circular='true'>
      <swiper-item v-for="(item,index) in bannerList" :key='index' @click="goContent(item)">
        <image :src="item.url"></image>
      </swiper-item>
</swiper>  

pages.json代码：
```json
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
// 距离底部 50px 时触发
"app-plus": {
"pullToRefresh": {
"support": true,
"style": "circle",
"offset": "50px"
}
}
}
}

操作步骤：

HBuilderX4.29，ios系统，开启页面下拉刷新，在页面中使用swiper，

预期结果：

两个item平滑过渡

实际结果：

卡在两个item中间，无法过渡

bug描述：

开启官方的下拉刷新之后，页面中的所有swiper都无法手动滑动，会卡在两个item中间不动 视频链接：https://img.ycyy.club/2024/11/12/807b57837b2f42ea9d3e154ee4eead7f.mp4


更多关于uni-app ios开启下拉刷新后swiper手动滑动会卡住不动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

只有开启了下拉刷新才会这样？

更多关于uni-app ios开启下拉刷新后swiper手动滑动会卡住不动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的，我把下拉刷新关闭之后就是正常的

回复 a***@163.com: 我使用模拟器 ios 17 ，运行 hello-uniapp 上的 swiper 示例，打开页面下拉刷新没有发现你所说的问题。如果可以的话，提供一个简单复现的 demo

回复 DCloud_UNI_LXH: demo放在下面一条评论了，您看看

回复 DCloud_UNI_LXH: 同碰到此问题。 用真机试试吧。每回都复现不了，实际都是问题。

更新了最新版4.36，还有此问题

回复 DCloud_UNI_LXH: 试一下把高度给的大一点切不超过屏幕的高度呢

回复 DCloud_UNI_LXH: 下拉刷新有概率把swiper的touchend事件吞掉，滑动只有touchstart没有touchend，从4.24以后就有这个问题了，页面配置：“app-plus”: { “pullToRefresh”: { “support”: true, “color”: “#1f47ff”, “style”: “circle”, “offset”: “100px” } }已经说的很明白了吧。。。

测试demo

我也跟你一样的问题。4.29版本之后云打包都有这个苹果轮播bug，更新到最新的4.36也不行，但是4.29版本之前是没问题的

同样。~

官方还能解决吗？

回复 aabbjian: 同样等待官方回复，看看下个版本有没修复了

回复 前端V威哥: 官方都没回复。不知道啥时候呢。

回复 aabbjian: 等下一次更新日志就应该知道了。

在uni-app中，如果你遇到在iOS设备上启用下拉刷新后，swiper组件手动滑动卡住不动的问题，这可能是由于swiper和下拉刷新组件之间的冲突或手势识别冲突导致的。为了解决这个问题，可以尝试调整swiper和下拉刷新组件的使用方式，或者使用一些代码技巧来优化手势处理。

以下是一个可能的解决方案，通过监听swiper的触摸事件和下拉刷新的状态来手动控制swiper的滑动行为：

<template>
  <view>
    <scroll-view
      scroll-y="true"
      @scrolltolower="onScrollToLower"
      :enable-back-to-top="true"
      ref="scrollView"
      class="scroll-view"
    >
      <swiper
        :autoplay="false"
        :indicator-dots="false"
        @touchstart="onSwiperTouchStart"
        @touchmove="onSwiperTouchMove"
        @touchend="onSwiperTouchEnd"
        class="swiper"
      >
        <swiper-item v-for="(item, index) in items" :key="index">
          <view>{{ item }}</view>
        </swiper-item>
      </swiper>
    </scroll-view>
    <view v-if="isRefreshing" class="refresh-indicator">正在刷新...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['页面1', '页面2', '页面3'],
      isRefreshing: false,
      swiperLock: false, // 控制swiper滑动的锁
    };
  },
  methods: {
    onScrollToLower() {
      if (!this.swiperLock) {
        this.isRefreshing = true;
        // 模拟下拉刷新操作，例如发送请求
        setTimeout(() => {
          this.isRefreshing = false;
          // 刷新完成后的操作，例如更新数据
        }, 2000);
      }
    },
    onSwiperTouchStart() {
      this.swiperLock = true; // 开始触摸swiper时锁定下拉刷新
    },
    onSwiperTouchMove() {
      // 可选：处理swiper滑动中的逻辑
    },
    onSwiperTouchEnd() {
      setTimeout(() => {
        this.swiperLock = false; // 滑动结束后解锁下拉刷新
      }, 300); // 延时解锁，确保用户完成swiper操作
    },
  },
};
</script>

<style>
/* 样式定义 */
</style>

在这个示例中，我们通过swiperLock变量来控制swiper滑动时是否允许下拉刷新操作。当用户开始触摸swiper时，将swiperLock设置为true，阻止下拉刷新；当swiper滑动结束后，通过延时解锁swiperLock，允许再次进行下拉刷新操作。

注意，这种方法是一个基本的解决方案，可能需要根据实际情况进行调整和优化。如果问题依然存在，建议检查uni-app和iOS系统的相关文档或社区，看是否有更具体的解决方案或已知问题报告。

回到顶部