TnWaterFall-瀑布流

瀑布流组件，用于展示一组等宽不等高的元素。

组件位置

nodeuni_modules

typescript

import TnWaterFall from '@tuniao/tnui-vue3-uniapp/components/water-fall/src/water-fall.vue'

import TnWaterFall from '@tuniao/tnui-vue3-uniapp/components/water-fall/src/water-fall.vue'

typescript

import TnWaterFall from '@/uni_modules/tuniaoui-vue3/components/water-fall/src/water-fall.vue'

import TnWaterFall from '@/uni_modules/tuniaoui-vue3/components/water-fall/src/water-fall.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过data属性传递数据，组件内部会根据设置的mode模式将数据分割成左右两列数据，开发者通过left和right插槽自定义左右两边的内容样式

当mode设置为normal时，组件会将数据按照顺序分割成左右两列数据，当mode设置为calc时，组件会计算左右两列的高度的方式分割成左右两列数据

vue

<template>
  <TnWaterFall :data="imageData">
    <template #left="{ item }">
      <view class="image-data">
        <image class="image" :src="item.url" mode="widthFix" />
      </view>
    </template>
    <template #right="{ item }">
      <view class="image-data">
        <image class="image" :src="item.url" mode="widthFix" />
      </view>
    </template>
  </TnWaterFall>
</template>

<style lang="scss">
.image-data {
  width: calc(100% - 20rpx);
  margin: 10rpx;

  .image {
    width: 100%;
    height: auto;
  }
}
</style>

<template>
  <TnWaterFall :data="imageData">
    <template #left="{ item }">
      <view class="image-data">
        <image class="image" :src="item.url" mode="widthFix" />
      </view>
    </template>
    <template #right="{ item }">
      <view class="image-data">
        <image class="image" :src="item.url" mode="widthFix" />
      </view>
    </template>
  </TnWaterFall>
</template>

<style lang="scss">
.image-data {
  width: calc(100% - 20rpx);
  margin: 10rpx;

  .image {
    width: 100%;
    height: auto;
  }
}
</style>

API

Props

属性名	说明	类型	默认值	可选值
data	列表数据	Array	-
mode	瀑布流模式	String	`normal`	`calc`

Slots

插槽名	返回值	说明
left	{item, index}	瀑布流左边单个item的内容
right	{item, index}	瀑布流右边单个item的内容

Expose

函数名	说明	类型
reset	重置瀑布流列表	`() => void`

TnWaterFall-瀑布流 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

API ​

Props ​

Slots ​

Expose ​