像素方舟_青阳
像素方舟_青阳
  • 发布:2021-08-09 20:14
  • 更新:2021-10-15 16:43
  • 阅读:1032

【报Bug】安卓 nvue list-swiper-waterfall 这种结构下, waterfall 内的 header 内容不显示

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: MI 8

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <list class="scroll" id="parent" :bounce="false" :fix-freezing="true">  
    <cell ref="header">  
      <view class="card" v-for="idx in 10" :key="idx">  
        <text>{{ idx }}</text>  
      </view>  
    </cell>  
    <cell :style="{ height }">  
      <hbb-swiper-bar :names="['页面A', '页面B', '页面C']" :current="current" @change="onChange" />  
      <swiper style="flex: 1" :current="current" @change="onSwiper" @animationfinish="onSwiper">  
        <!-- 问题1 - 规避方案 -->  
        <swiper-item @appear="onEffects(0)">  
          <hbb-waterfall ref="page0" :bounce="false" :fix-freezing="true" />  
        </swiper-item>  
        <swiper-item>  
          <hbb-waterfall ref="page1" :bounce="false" :fix-freezing="true" />  
        </swiper-item>  
        <swiper-item>  
          <hbb-waterfall ref="page2" :bounce="false" :fix-freezing="true" />  
        </swiper-item>  
      </swiper>  
    </cell>  
  </list>  
</template>  
  
<script>  
import { getRefRect } from './weex'  
  
const sys = uni.getSystemInfoSync()  
  
export default {  
  data() {  
    return {  
      current: 0,  
      height: sys.windowHeight - sys.statusBarHeight, // 可视高度 - 状态栏高度  
    }  
  },  
  async mounted() {  
    const rect = await getRefRect(this.$refs.header)  
    this.headerHeight = rect.height - sys.statusBarHeight // 头部高度 - 状态栏高度  
    this.onEffects(this.current) // 问题1:此处设置无效,因为 waterfall 不在可视区域内  
  },  
  methods: {  
    onChange(idx) {  
      this.onEffects(idx)  
      if (this.current === idx) return  
      this.current = idx  
    },  
    onSwiper(e) {  
      const idx = e.detail.current  
      this.onChange(idx)  
    },  
    onEffects(idx) {  
      const page = this.$refs[`page${idx}`]  
      page.setEffects('parent', this.headerHeight)  
      console.log('setEffects', idx, this.headerHeight)  
    },  
  },  
}  
</script>  
  
<style lang="scss" scoped>  
.scroll {  
  background: #fff;  
}  
  
.card {  
  align-items: center;  
  justify-content: center;  
  margin: 30rpx;  
  margin-bottom: 0;  
  width: 690rpx;  
  height: 200rpx;  
  border-radius: 10rpx;  
  background: rgba(red, 0.1);  
}  
</style>

操作步骤:

安卓真机运行

预期结果:

显示waterfall 内 header 显示正常

实际结果:

显示waterfall 内 header 不显示

bug描述:

安卓 nvue list-swiper-waterfall 这种结构下相关问题

  1. 当 swiper 离屏后waterfall 设置 specialEffects 无效,检查 hbb-swiper-list.vue
  2. waterfall 内的 header 内容不显示,检查 hbb-waterfall.vue
  3. waterfall 内的 header 设置 position absolute 也不显示,设置 fixed 能正常显示

tips: 花了不少时间裁剪了业务相关代码,问题稳定复现,希望官方重视

2021-08-09 20:14 负责人:无 分享
已邀请:
像素方舟_青阳

像素方舟_青阳 (作者)

上拉加载处理逻辑,这块建议封装成组件

<template>  
  <waterfall  
    ref="list"  
    :style="{ flex: 1 }"  
    :left-gap="padding"  
    :right-gap="padding"  
    :column-gap="margin"  
    :column-width="width"  
    :column-count="2"  
    :show-scrollbar="false"  
    :scroll-to-begin="false"  
    :bounce="false"  
    :fix-freezing="true"  
    :loadmoreoffset="offset"  
    @loadmore="onLoadmore()"  
    v-bind="$attrs"  
    v-on="$listeners"  
  >  
    <header :style="{ height: margin }"></header>  
    <slot></slot>  
  </waterfall>  
</template>  
  
<script>  
export default {  
  data() {  
    const sys = uni.getSystemInfoSync()  
    return {  
      padding: uni.upx2px(32), // 根据设计稿调整  
      margin: uni.upx2px(30), // 根据设计稿调整  
      width: uni.upx2px(328), // (750 - 32 * 2 - 30) /2  
      offset: sys.windowHeight // 距离底部一屏高的时候,触发加载更多  
    }  
  },  
  methods: {  
    onLoadmore() {  
      this.$emit('loadmore')  
      // 此处延迟是为了避免立即重置导致重复触发,时间根据情况调整  
      setTimeout(() => {  
        // 注:如果上拉加载数据后,再下拉刷新,然后无法再触发loadmore事件时,请重置loadmore  
        this.$refs['list'].resetLoadmore()  
      }, 300)  
    },  
    setEffects(id = '', headerHeight = 0) {  
      this.$refs.list.setSpecialEffects({ id, headerHeight })  
    }  
  }  
}  
</script>
DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX alpha 3.2.5+ 已修复

DCloud_Android_ST

DCloud_Android_ST

附件示例demo提供下 代码片段不能复现问题。

  • 像素方舟_青阳 (作者)

    花了不少时间,重新编辑了问题,附件中包含示例项目和真机视频,麻烦看下


    2021-08-10 13:30

  • 像素方舟_青阳 (作者)

    主要产生的问题是,此种结构下,waterfall内,无法通过 header 设置空态,没有更多等其他内容额。因为cell 会被强制拆分成2列


    2021-08-10 13:33

  • DCloud_Android_ST

    回复 像素方舟_青阳: 好的 我们验证下


    2021-08-10 14:50

  • DCloud_Android_ST

    回复 DCloud_Android_ST: header 无法显示的问题已确认。android平台setspecialEffects 中的headerHeight暂时不支持 文档有说明


    2021-08-11 12:35

特购

特购 - 特购

作者 麻烦问下这种格式的上拉加载怎么处理 目前上拉加载放在list中 会提前出现loading 放在waterfall中 会不触发@loading

  • 像素方舟_青阳 (作者)

    下面给了例子,自己项目中使用的


    2021-09-24 11:46

  • 特购

    回复 像素方舟_青阳: 好的 多谢


    2021-09-24 18:02

  • 特购

    回复 像素方舟_青阳: 麻烦问下作者 在ios上运行有没有遇见 header向上滑动 剩下一半内容在屏幕内 下面的瀑布流内容已经能单独滚动 和整个页面滚动是两个不同的滚动


    2021-09-30 11:57

  • 特购

    回复 2***@qq.com: 安卓机上正常 ios不正常


    2021-09-30 11:58

  • 像素方舟_青阳 (作者)

    回复 2***@qq.com: 说真的 这种相对复杂的嵌套结构还有其他问题,手势冲突这块就没法整,建议调整设计方案


    2021-09-30 12:03

  • 特购

    回复 像素方舟_青阳: 好吧 谢谢了


    2021-09-30 14:11

2***@qq.com

2***@qq.com

https://blog.csdn.net/qq_23064433/article/details/120771735

  • 像素方舟_青阳 (作者)

    内容基本正确,和问题没关系,该问题是uni-app本身的问题,最新uni-app版本已修复


    2021-10-15 16:53

  • 2***@qq.com

    回复 像素方舟_青阳: 我知道,我只是回复给别人的。我看别人没有写过这样的文章,所以发篇文章引导一下别人而已


    2021-10-15 17:28

该问题目前已经被锁定, 无法添加新回复