This page is translated by Google Cloud Translation API

Switch to Chinese

waterfall

app side nvue specific component.

The <waterfall> component is the core component that provides the waterfall layout. Waterfall flow, also known as waterfall flow layout, is a relatively popular page layout, and the visual performance is a jagged multi-column layout. This layout also continuously loads chunks of data and appends to the current tail as the page scroll bar scrolls down.

In nvue, using ordinary view as waterfall flow cannot achieve reuse and release of invisible rendering resources. After using the <waterfall> component and specifying cell, the native engine will automatically optimize the performance.

<template>
  <waterfall column-count="2" column-width="auto">
    <cell v-for="num in lists" >
      <text>{{num}}</text>
    </cell>
  </waterfall>
</template>
<script>
  export default {
    data () {
      return {
        lists: ['A', 'B', 'C', 'D', 'E']
      }
    }
  }
</script>

<style></style>

Sub-component

Similar to the <list> component, the sub-components of the <waterfall> component can only include the following four components or fixed components, and other forms of components will not be rendered correctly.

• <cell>: Used to define the sub-list items in the list, similar to the ul to li in HTML.<waterfall> Efficient memory reclamation will be performed on <cell> to achieve better performance.
• <header>: When <header> reaches the top of the screen, it snaps to the top of the screen.
• <refresh>: Used to add a pull-down refresh function to the list.
• <loading>：<loading> 用法与特性和 <refresh> 类似，用于给列表添加上拉加载更多的功能。

Attribute

• show-scrollbar: The optional values of [Optional] are true/false, and the default value is true. Control whether scroll bars appear.
• column-count: [Optional] describes the number of columns in the waterfall flow
  • auto: It means that the number of columns is determined by other attributes (such as column-width)
  • <integer>: Optimal number of columns. If both column-width and column-count are specified as non-zero values, then column-count represents the maximum number of columns.
• column-width: [Optional] describes the column width of each column of the waterfall flow
  • auto: means that the column width is determined by other attributes (such as column-count)
  • <length>: optimal column width, the actual column width may be wider (need to fill the remaining space), or narrower (if the remaining space is smaller than the column width). The value must be greater than 0
• column-gap: [optional] the column-to-column gap. Corresponds to 32 if normal is specified.
• left-gap: [optional] the gap between the left cell and the list. If not specified, it corresponds to 0
• right-gap: [可选]右边cell和列表的间隙. 如果未指定，则对应 0
• always-scrollable-vertical : [Optional] The optional value is true/false, the default value is false, iOS platform, when the content is less than one screen and cannot trigger the pull-down refresh, it needs to be set to true, because the default subview height does not exceed The waterfall cannot slide when the parent view is high

For other supported attributes, see <list> component attribute section

event

All Universal Events are supported:

• click: used to listen to click events. (For example: it is generally bound to sub-components to trigger a jump).
• longpress: used to listen to long-press events (generally bound to sub-components. For example, long press to delete).
• appear: used to listen to the occurrence of sub-component events (generally bound to sub-components. For example, listen to the occurrence of the last element and load new data)
• disappear: used to listen to the event that the child component slides out of the screen (generally bound to sub-components)

Notice

• waterfall是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
• 如出现waterfall列表下边大面积空白区域（多列和单列时的整体高度相同，多列展示没有高度自适应），那么可以将waterfall放到父容器下边，给父容器高度设置为窗口高度，除瀑布流展示的列表外，其他的组件都放在
  中即可。 示例代码如下：

<template>
  <waterfall column-count="2" column-width="auto" :style="{ height: windowHeight + 'px' }">
    <header>
      <!--轮播-->
      <swiper class="swiper_banner">
        ......
      </swiper>
      <!--广告位-->
      <view class="ads_List_box">
        ......
      </view>
    </header>
    <!--瀑布流展示的商品列表-->
    <cell v-for="num in lists" >
      <text>{{num}}</text>
    </cell>
  </waterfall>
</template>
<script>
  export default {
    data () {
      return {
        lists: ['A', 'B', 'C', 'D', 'E'],
        windowHeight: uni.getSystemInfoSync().windowHeight
      }
    }
  }
</script>

<style></style>