uni-app Iphone 8 swiper list refresh 回弹bug
uni-app Iphone 8 swiper list refresh 回弹bug
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 10 | HBuilderX |
示例代码：
<list :id="pageId" class="page" :bounce="true" fixFreezing="true">
<refresh :display="refreshing ? 'show' : 'hide'" @refresh="onrefresh">
<view class="loadmore">
<text class="loadmore_text">refresh......</text>
</view>
</refresh>
methods: {
onrefresh() {
this.refreshing = true
setTimeout(() => {
this.refreshing = false
}, 2000)
},
}
问题已经发现了，直接用这个例子(nvue 多页签滑动吸顶效果)，把bounce设置为true，是好的，但是如果加上 fix-freezing=“true” 就会有问题，一下好一下坏，比我自己实际项目效果要好一点，不会出现往上缩的情况，但是会出现还没等待刷新完毕，刷新完毕的动画就已经出来了
在 uni-app 中使用 swiper 组件时，特别是在 iPhone 8 等设备上，可能会遇到 swiper 列表刷新时出现回弹（bounce）的 bug。这个问题通常是由于 swiper 组件的默认行为与某些设备的滚动行为不兼容导致的。
解决方案
以下是一些可能的解决方案，你可以根据实际情况尝试：
1. 禁用 swiper 的回弹效果
你可以通过设置 swiper 组件的 bounce 属性为 false 来禁用回弹效果。
<swiper :bounce="false">
<!-- swiper items -->
</swiper>2. 使用 scroll-view 替代 swiper
如果 swiper 的回弹问题无法解决，你可以考虑使用 scroll-view 组件来实现类似的效果。scroll-view 提供了更灵活的滚动控制，并且可以通过设置 scroll-y 或 scroll-x 来实现垂直或水平滚动。
<scroll-view scroll-y>
<!-- scroll items -->
</scroll-view>3. 自定义 swiper 的样式和行为
你可以通过自定义 swiper 的样式和行为来避免回弹问题。例如，可以通过 CSS 设置 overflow: hidden 来防止内容溢出。
.swiper-container {
overflow: hidden;
}4. 使用 uni-app 的 onPullDownRefresh 事件
如果你需要在 swiper 中实现下拉刷新功能，可以使用 uni-app 提供的 onPullDownRefresh 事件，而不是依赖 swiper 的默认行为。
onPullDownRefresh() {
// 处理下拉刷新逻辑
uni.stopPullDownRefresh(); // 停止下拉刷新
}5. 检查 swiper 的版本和兼容性
确保你使用的 swiper 版本是最新的，并且与 uni-app 的版本兼容。有时，更新到最新版本可以解决一些已知的 bug。
6. 使用 uni-app 的 page 组件
如果问题依然存在，你可以尝试将 swiper 放在 page 组件中，并通过 page 组件的 scroll 属性来控制滚动行为。
<page scroll-y>
<swiper>
<!-- swiper items -->
</swiper>
</page>