虚拟列表 + 瀑布流

最新推荐文章于 2024-04-09 19:40:10 发布

VIP文章 Y_Z233

最新推荐文章于 2024-04-09 19:40:10 发布

阅读量1.2k

点赞数

分类专栏：组件封装文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Y_Z233/article/details/124899004

版权

虚拟列表 + 瀑布流

效果

在这里插入图片描述

属性

参数	说明	类型	可选值	默认值
size	一次性添加的数据条数	number	-	50
column	列数	number	-	1
marginBottom	每项底边距	number	-	0
loading	数据加载状态	boolean	-	false
marginTop	距离底部多少开始拉取数据	number	-	1000
data	需要进行分裂的数据,{height:300},一定要含有高度字段，防止加载图片文件缓慢计算不准确	array	-	{height:300}

方法

事件名称	说明	回调参数
fetchData	滚动到指定位置通知加载数据	-

组件内容

<template>
  <div class="c-virtual-list">
    <!-- 一屏内容有高度 -->
    <div
      class="virtual-screen"
      v-for="(screen, index) in list"
      :key="index"
      :data-index="index"
      :style="{ height: screen.height + 'px' }"
    >
      <!-- 通过v-if进行判断 节点交互是否出现在当前视口内 -->
      <div class="screen-content" v-if="computeShow(index)">
        <!-- 渲染列数 -->
        <div
          class="column"
          v-for="(column, cIndex) in screen.columns"
          :key="cIndex"
          :style="{
   
            marginTop:
              index > 0 ? `-${
     list[index - 1].heightOffset[cIndex]}px` : '0',
          }"
        >
          <slot :data="column" :index="index"></slot>
          <!-- 插槽向外部暴露数据 -->
        </div>
      </div>
    </div>
    <div class="loading" :style="{ marginTop: -marginTop + 'px' }">loading</div>
  </div>
</template>
<script setup>
import {
   
  defineProps,
  defineEmits,
  nextTick,
  onBeforeUnmount,
  onMounted,
  reactive,
  watch,
} from "vue";

const props = defineProps({
   
  // 一次性插入数据
  size: {
   
    type: Number,
    require: true,
    default: 50,
  },
  // 列数
  column: {
   
    type: Number,
    default: 1,
  },
  // 每项底边距
  marginBottom: {
   
    type: Number,
    default: 0,
  },
  // 数据加载状态
  loading: {
   
    type: Boolean,
    default: false,
  },
  // 距离底部多少开始拉取数据
  marginTop: {
   
    type: Number,
    default: 1000,
  },
  // 分列数据
  data: {
   
    type: Array,
    default: () => [],
  },
});

// 最终数据结构
const list = reactive([
  // 一屏内容
  // {
   
  //   // 是否展示
  //   show: false,
  //   // 取最大列高度
  //   height: "",
  //   // 每列高度
  //   heights: [],
  //   // 每列移量
  //   heightOffset: [],
  //   // 每列数据
  //   columns:[[],[],[]],
  // }
]);
// 渲染项  height 为必须项
const item = {
   
  height: 300,
  color: "",
};
// 可视节点索引
const showList = reactive([-1, 0, 1]);
const emits = defineEmits(["update:loading", "fetchData"]);

onMounted(() => {
   
  createNodeObserve(".loading", () => {
   
    // 通知父组件去加载数据
    console.log("去加载数据");
    emits("fetchData");
  });
});

// 监听传入data发生改变
watch(props.data, (newData, preDate) => {
   
  // console.log("newData: ", newData);
  // 对最新数据进行分列
  divisionData(newData);
  // 对所有分屏节点进行视口监听
  nextTick(() => {
   
    createNodeObserve(".virtual-screen", (index) => {
   
      // 渲染3部分数据
      Object.assign(showList, [index - 1, index, index + 1]);
    });
  });
});

/**
 * 可视节点监听
 *
 * @param {string} element 元素类名
 */
let ob;
const