uni-app swiper-list-waterfall 结构中 swiper 切换时应禁止 list 上下滑动

uni-app swiper-list-waterfall 结构中 swiper 切换时应禁止 list 上下滑动

产品分类

uniapp/App

示例代码

https://ask.dcloud.net.cn/publish/article/39444

<template> <view class="page"> <view :style="{ height: statusBarHeight }" /> <view class="tabs"> <view v-for="(item, idx) in tabs" :key="idx" class="tab" :class="{ active: current === idx }" @click="onChange(idx)"> <text class="name">{{ item.name }}</text> <view class="line" /> </view> </view> <swiper style="flex: 1" :current="current" @change="onChange($event.detail.current)"> <swiper-item> <list> <cell v-for="idx in 20" :key="idx"> <view class="wide">{{ idx }}</view> </cell> </list> </swiper-item> <swiper-item> <list-waterfall> <template v-slot:header> <view class="header">header</view> </template> <cell v-for="idx in 20" :key="idx"> <view class="card">{{ idx }}</view> </cell> </list-waterfall> </swiper-item> <swiper-item> <waterfall :left-gap="gap32" :right-gap="gap32" :column-gap="gap24" :column-width="colWidth" :column-count="colCount"> <cell v-for="idx in 20" :key="idx"> <view class="card">{{ idx }}</view> </cell> </waterfall> </swiper-item> </swiper> </view> </template> <script> import ListWaterfall from './list-waterfall.vue' export default { components: { ListWaterfall, }, data() { const sys = uni.getSystemInfoSync() return { load: [0, 0, 0], current: 1, tabs: [{ name: '关注' }, { name: '发现' }, { name: '推荐' }], // gap32: uni.upx2px(32), gap24: uni.upx2px(24), colWidth: uni.upx2px(331), statusBarHeight: sys.statusBarHeight, } }, created() { this.$set(this.load, this.current, 1) }, methods: { onChange(idx) { if (this.current === idx) return this.load[idx] = 1 this.current = idx }, }, } </script>

更多关于uni-app swiper-list-waterfall 结构中 swiper 切换时应禁止 list 上下滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

该问题在iOS下存在，安卓下左右切换的时候正常，这个结构很常见但是实际用户体验操作起来很不舒服

更多关于uni-app swiper-list-waterfall 结构中 swiper 切换时应禁止 list 上下滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


视频无法查看，放到一个公共网盘吧

链接改了，视频也作为附件存了

回复 青阳_1900: 示例代码无法直接运行

回复 DCloud_iOS_XHY: 行，我再给你弄个新工程

回复 DCloud_iOS_XHY: 已经更新实例工程，swiper-list-waterfall.zip

回复 青阳_1900: 好的，此问题先记录，目前还没找到好的方法处理

回复 DCloud_iOS_XHY: 麻烦了，痛苦了很久。

HX3.4.3+版本已优化该问题

你好，3.4.3+版本什么时候可以上正式版呢

回复 3***@qq.com: HBuilderX 3.4.6正式版已发布

回复 DCloud_UNI_Anne: 现在swiper list 不滚动到最上面都没法左右切换了啊

没优化啊，照样可以一边滑动一边下拉

没有优化啊，还是能一边滑动一边下拉

在 swiper-list-waterfall 结构中，当 swiper 切换时，可以通过控制 list 或 waterfall 组件的 scroll-enabled 属性来禁止上下滑动。具体实现如下：

  1. 在 data 中定义一个变量（如 scrollEnabled）来动态控制滑动状态。
  2. 在 swiper 的 @change 事件中，根据切换状态更新 scrollEnabled 的值。
  3. 将 scrollEnabled 绑定到 list 或 waterfall 组件的 scroll-enabled 属性上。

示例代码修改：

data() {
  return {
    scrollEnabled: true,
    // 其他数据...
  };
},
methods: {
  onChange(idx) {
    this.scrollEnabled = false; // 切换时禁止滑动
    setTimeout(() => {
      this.scrollEnabled = true; // 切换完成后恢复滑动
    }, 300); // 延迟时间需与 swiper 切换动画时间匹配
    // 其他逻辑...
  }
}

在模板中为 list 或 waterfall 组件添加 scroll-enabled 绑定：

<list :scroll-enabled="scrollEnabled">
  <!-- 内容 -->
</list>
回到顶部