uni-app中，黑色背景时waterfall无数据时refresh总是显示成一条白线

uni-app中，黑色背景时waterfall无数据时refresh总是显示成一条白线

开发环境 版本号 项目创建方式
HbuilderX 3.4.7

示例代码：

黑色页面背景时，现在只有先判断listData是否有值，无值时才显示refresh ，但是没有refresh 时，页面又不能下拉。

<template>  
    <waterfall class="page" :column-count="2" :column-gap="5" :left-gap="5" :right-gap="5">  

        <cell class="opuss" v-for="(op, o) in listData" :key="o">  
            <stock class="item" :opus="op" :size="size" />  
        </cell>  

        <refresh @refresh="onRefresh" @pullingdown="onPullingDown" :display="refresh">  
            <text class="center refresh">{{runtime.app.home.refresh}}</text>  
        </refresh>  

    </waterfall>  
</template>

操作步骤：

如代码和图所示

预期结果：

不显示

实际结果：

显示


更多关于uni-app中，黑色背景时waterfall无数据时refresh总是显示成一条白线的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不应该是refresh放第一个，然后是循环的cell，最后是loading吗？

更多关于uni-app中，黑色背景时waterfall无数据时refresh总是显示成一条白线的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在没有数据的情况下，也就是如我代码中的listData是空的情况下，就会这样。
不过，现在用另一个办法可以解决：在listData是空的情况下，就显示一个空的view，那这个refresh就不显示成一条白线了。 也就是在waterfall下面不能只有一个节点。

在 uni-app 中使用 waterfall 组件时，如果背景是黑色且没有数据时，refresh 组件可能会显示为一条白线。这是因为 refresh 组件的默认样式可能与黑色背景不兼容，导致显示异常。

要解决这个问题，你可以通过以下几种方式来调整 refresh 组件的样式，使其在黑色背景下正常显示：

1. 自定义 refresh 组件的样式

你可以通过自定义 refresh 组件的样式来改变其颜色，使其在黑色背景下更加明显。

<template>
  <view class="container">
    <waterfall ref="waterfall" :data="dataList" @refresh="onRefresh">
      <template v-slot:refresh>
        <view class="custom-refresh">
          <text>下拉刷新</text>
        </view>
      </template>
    </waterfall>
  </view>
</template>

<style>
.container {
  background-color: black;
}

.custom-refresh {
  color: white; /* 设置文字颜色为白色 */
  background-color: rgba(255, 255, 255, 0.1); /* 设置背景颜色为半透明白色 */
  padding: 10px;
  text-align: center;
}
</style>

2. 使用 uni-load-more 组件

uni-app 提供了 uni-load-more 组件，可以用来替代默认的 refresh 组件，并且可以自定义样式。

<template>
  <view class="container">
    <waterfall ref="waterfall" :data="dataList" @refresh="onRefresh">
      <template v-slot:refresh>
        <uni-load-more status="loading" :content-text="contentText" />
      </template>
    </waterfall>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      contentText: {
        contentdown: '下拉刷新',
        contentrefresh: '正在刷新...',
        contentnomore: '没有更多数据'
      }
    };
  },
  methods: {
    onRefresh() {
      // 刷新逻辑
    }
  }
};
</script>

<style>
.container {
  background-color: black;
}

.uni-load-more {
  color: white; /* 设置文字颜色为白色 */
  background-color: rgba(255, 255, 255, 0.1); /* 设置背景颜色为半透明白色 */
}
</style>

3. 使用 scoped 样式

如果你使用了 scoped 样式，确保样式能够正确应用到 refresh 组件上。

<template>
  <view class="container">
    <waterfall ref="waterfall" :data="dataList" @refresh="onRefresh">
      <template v-slot:refresh>
        <view class="custom-refresh">
          <text>下拉刷新</text>
        </view>
      </template>
    </waterfall>
  </view>
</template>

<style scoped>
.container {
  background-color: black;
}

.custom-refresh {
  color: white; /* 设置文字颜色为白色 */
  background-color: rgba(255, 255, 255, 0.1); /* 设置背景颜色为半透明白色 */
  padding: 10px;
  text-align: center;
}
</style>
回到顶部