uni-app NVUE的list、waterfall组件的cell内容随机渲染不出来

uni-app NVUE的list、waterfall组件的cell内容随机渲染不出来

操作步骤：

  • 我把代码swiper-list-nvue.zip上传了，可以覆盖到官方的demo里，路径为pages/template/swiper-list-nvue

预期结果：

  • 这个怎么写？

实际结果：

  • 这个也不会写。

bug描述：

所有安卓，vivo y83a、荣耀、红米9等真机调试、模拟器都存在此问题：

  • nvue的list、waterfall的随机的cell不能正确渲染，导致这些cell的内容好像丢了似的。
  • 导致不能显示的原因是：用hbuilderx的调试模式查看，发现cell节点及其子节点的visibility=false
  • 正常能显示的，就都是visibility=true
  • 至于为啥visibility=false，我就不懂了，已经卡了进度一周了。

图片

Image 1 Image 2

附件


更多关于uni-app NVUE的list、waterfall组件的cell内容随机渲染不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

在cell 上加个 keep-scroll-position 这个属性 就行了 测试可以

更多关于uni-app NVUE的list、waterfall组件的cell内容随机渲染不出来的实战教程也可以访问 https://www.itying.com/category-93-b0.html


虽然数据是对的 但是会跳到最后cell 效果就错了 垃啊

我也遇到相同的问题，求处理

这个问题这么久了 还没有解决，我也是这情况

嗯，怀疑和weex的原生部分有关系，渲染计算组件高度因组件内图片等内容异步加载导致的计算有误，搞丢了

回复 f***@163.com: 有解决方案么

回复 f***@163.com: 真是图片原因，去掉图片就正常了，这个咋解决？我草

回复 全栈开发小能手: 没辙，得靠官方给修复，1年了，此问题依然存在，唉

回复 f***@163.com: 不停@官方

顶！

顶！在配置不是太好的安卓机子上 出现几率很大

如果是图片异步加载的原因，那你可以不用image标签，用view + 背景图片来渲染呗

你可以试试，我感觉不能解决问题，这是原生的weex

@DCloud_Android_DQQ 这个问题修复了嘛

在使用 uni-app 的 NVUE 开发时，如果你遇到 list 或 waterfall 组件的 cell 内容随机渲染不出来的问题，可能是由于以下几个原因导致的。以下是一些常见的排查和解决方法：

1. 数据绑定问题

  • 问题描述: 如果 cell 的内容是通过数据绑定的方式动态生成的，可能是数据未正确绑定或数据更新不及时。
  • 解决方法: 确保数据正确绑定到 cell 上，并且数据更新时及时触发 setData 或 $set 方法。
<template>
  <list>
    <cell v-for="(item, index) in items" :key="index">
      <text>{{ item.title }}</text>
    </cell>
  </list>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟异步获取数据
      setTimeout(() => {
        this.items = [
          { title: 'Item 1' },
          { title: 'Item 2' },
          { title: 'Item 3' }
        ];
      }, 1000);
    }
  }
};
</script>

2. key 属性问题

  • 问题描述: 如果 v-for 循环渲染 cell 时没有正确设置 key 属性，可能会导致渲染异常。
  • 解决方法: 确保每个 cell 都有唯一的 key 属性。
<cell v-for="(item, index) in items" :key="item.id">
  <text>{{ item.title }}</text>
</cell>

3. 布局问题

  • 问题描述: 如果 cell 的布局设置不正确，可能会导致内容无法正常显示。
  • 解决方法: 检查 cell 的布局样式，确保宽度、高度等属性设置正确。
<cell style="width: 100%; height: 100px;">
  <text>{{ item.title }}</text>
</cell>

4. 异步加载问题

  • 问题描述: 如果 cell 的内容依赖于异步加载的数据或图片，可能会导致内容在数据加载完成前无法显示。
  • 解决方法: 确保在数据加载完成后再渲染 cell，或者使用占位符。
<cell v-if="item.loaded">
  <text>{{ item.title }}</text>
</cell>
<cell v-else>
  <text>Loading...</text>
</cell>

5. waterfall 组件的特殊问题

  • 问题描述: waterfall 组件在渲染时可能会有特殊的布局要求，如果 cell 的高度计算不正确，可能会导致内容无法显示。
  • 解决方法: 确保 cell 的高度计算正确，或者使用 flex 布局。
<waterfall>
  <cell v-for="(item, index) in items" :key="index" style="flex: 1;">
    <text>{{ item.title }}</text>
  </cell>
</waterfall>
回到顶部