像素方舟_青阳
像素方舟_青阳
  • 发布:2021-11-23 14:57
  • 更新:2022-03-28 15:05
  • 阅读:248

【报Bug】swiper-list-waterfall 结构,swiper 切换的时候,应该禁止list上下滑动

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: macOS Big Sur 11.2.3

HBuilderX类型: 正式

HBuilderX版本号: 3.2.15

手机系统: Android

手机系统版本号: Android 12

手机厂商: 小米

手机机型: iPhone 13

页面类型: vue

vue版本: vue2

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

list-waterfall 相关代码见 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>

操作步骤:

运行即可

预期结果:

swiper 切换的时候list 不可以上下滑动

实际结果:

swiper 切换的时候list 可以上下滑动

bug描述:

swiper-list-waterfall 结构,ios内按住 header 区域左右切换的时候,应该静止上下滑动

  1. header区域直接按住左滑不释放,然后上下滑动,正常应该禁止上滑
  2. waterfall 区域滚动到顶后,左滑不释放并上下滑动,手势正常

查看视频

2021-11-23 14:57 负责人:DCloud_iOS_XHY 分享
已邀请:
像素方舟_青阳

像素方舟_青阳 (作者)

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

DCloud_iOS_XHY

DCloud_iOS_XHY

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

DCloud_UNI_Anne

DCloud_UNI_Anne

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

  • 3***@qq.com

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

    2022-04-20 14:16

  • DCloud_UNI_Anne

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

    2022-04-21 12:10

  • d***@whaiw.com

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

    2022-04-22 09:36

  • 长腿叔叔

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

    2022-06-15 00:35

要回复问题请先登录注册