uni-app scoll-view放到swiper-item的时候h5异常

uni-app scoll-view放到swiper-item的时候h5异常

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：

组件层级见报错截图。h5的时候切换swiper重新进入页面就报错了。 不知道是否能理解问题，如有需要再搞个demo 我感觉是切换了swiper后他想自动返回顶部，就报错了 因为报错的地方是这个scrollTop获取不到，不是业务代码，无法排查

onActivated(() => {  
  props2.scrollY && (main.value.scrollTop = state2.lastScrollTop);  
  props2.scrollX && (main.value.scrollLeft = state2.lastScrollLeft);  
});

另外我尝试将:scroll-y="true"去掉后不报错，进一步说明是滚动的时候造成的异常

<scroll-view :scroll-y="true"  @touchstart="touchstart" @scrolltolower="scrolltolower">

Screenshot


更多关于uni-app scoll-view放到swiper-item的时候h5异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

提供下测试工程吧

更多关于uni-app scoll-view放到swiper-item的时候h5异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发时，将 scroll-view 放到 swiper-item 中时，可能会在 H5 端出现一些异常行为，比如滚动失效、布局错乱等问题。这通常是由于 swiper 和 scroll-view 的默认行为冲突导致的。

以下是一些常见的解决方案和注意事项：

1. 确保 swiper 和 scroll-view 的样式正确

确保 swiper 和 scroll-view 的样式设置正确，特别是高度和宽度。swiper 和 scroll-view 都需要明确的高度，否则可能会导致布局异常。

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

2. 使用 @touchmove.stop 阻止事件冒泡

在 swiper-item 中的 scroll-view 上添加 @touchmove.stop 可以阻止触摸事件冒泡到 swiper，从而避免 swiper 的滑动行为干扰 scroll-view 的滚动。

<swiper style="height: 100vh;">
  <swiper-item>
    <scroll-view scroll-y style="height: 100%;" @touchmove.stop>
      <!-- 内容 -->
    </scroll-view>
  </swiper-item>
</swiper>

3. 使用 @change 事件控制 swiper 的滑动

在某些情况下，你可能需要根据 scroll-view 的滚动状态来控制 swiper 的滑动行为。可以通过监听 scroll-view 的 @scroll 事件和 swiper 的 @change 事件来实现。

<swiper style="height: 100vh;" @change="onSwiperChange">
  <swiper-item>
    <scroll-view scroll-y style="height: 100%;" @scroll="onScroll">
      <!-- 内容 -->
    </scroll-view>
  </swiper-item>
</swiper>

export default {
  methods: {
    onScroll(event) {
      // 处理滚动事件
    },
    onSwiperChange(event) {
      // 处理 swiper 切换事件
    }
  }
}

4. 使用 scroll-view 的 scroll-top 属性

如果你需要在 swiper 切换时重置 scroll-view 的滚动位置，可以使用 scroll-view 的 scroll-top 属性。

<swiper style="height: 100vh;" @change="onSwiperChange">
  <swiper-item>
    <scroll-view scroll-y style="height: 100%;" :scroll-top="scrollTop">
      <!-- 内容 -->
    </scroll-view>
  </swiper-item>
</swiper>

export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  methods: {
    onSwiperChange(event) {
      this.scrollTop = 0; // 重置滚动位置
    }
  }
}

5. 使用 scroll-view 的 scroll-with-animation 属性

如果你希望在滚动时带有动画效果，可以使用 scroll-view 的 scroll-with-animation 属性。

<scroll-view scroll-y style="height: 100%;" scroll-with-animation>
  <!-- 内容 -->
</scroll-view>

6. 检查 swiper 的 circular 属性

如果 swiper 的 circular 属性设置为 true，可能会导致 scroll-view 的滚动行为异常。你可以尝试将其设置为 false 看看是否能解决问题。

<swiper style="height: 100vh;" :circular="false">
  <swiper-item>
    <scroll-view scroll-y style="height: 100%;">
      <!-- 内容 -->
    </scroll-view>
  </swiper-item>
</swiper>

7. 使用 uni-app 的 page 样式

确保 page 的样式设置正确，避免全局样式影响 swiper 和 scroll-view 的布局。

page {
  height: 100%;
}

8. 使用 uni-app 的 flex 布局

使用 flex 布局可以更好地控制 swiper 和 scroll-view 的布局。

<view class="container">
  <swiper style="flex: 1;">
    <swiper-item>
      <scroll-view scroll-y style="height: 100%;">
        <!-- 内容 -->
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
回到顶部