【vue3】封装web端滚动加载的列表

需求如下图,做一个隐藏滚动条的高度固定的且下拉到底部自动加载的列表效果 

web端最开始简单的用css隐藏滚动条后,想用高度判定到底页码current自加然后再次请求,数据push进列表data里(p.s. 别忘了不需要的时候把页码值初始化),做到后面发现所有需求都要隐藏滚动条下拉加载,直接怒抽组件,顺便自定义列表内容.

代码借鉴了这篇文章 Vue3实现下拉刷新,上滑加载列表,列表内容自定义 感谢大佬\(^o^)/~

组件代码如下

<template>
  <div class="pullDown" ref="pullDown">
    <div class="pullDownTop"><span v-show="showRefresh">刷新中...</span></div>
    <div class="static">
      <div ref="leftScroll" class="scroll" @scroll="scrollE">
        <div>
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

import { ref, watch } from "vue";

const props = defineProps({
  loading: Boolean,//异步加载数据后标识是否加载完成
  noMore: Boolean//标识是否还有更多数据需要加载
})
//loadMore事件标识加载更多数据内容
const emits = defineEmits(['loadMore'])

//加载结束,隐藏UI
watch(() => props.loading, () => {
  setTimeout(() => {
    showRefresh.value = false
    y.value = 0;
    getChild(0).style.height = y.value + "px";
  }, 1000);
})

//标识加载提示是否显示
const showRefresh = ref(false);
//ref容器
const pullDown = ref(null);
let y = ref<number>(0);
const getPullDown = () => {
  return pullDown.value as unknown as HTMLDivElement;
};
const getChild = (n: number) => {
  return getPullDown().children[n] as HTMLDivElement;
};


const loadMore = () => {
  if (!props.noMore) {
    //触发加载更多事件
    emits('loadMore')
  }
}
//防抖函数,默认100ms
const debounce = (() => {
  let timer = 0
  return (callback: any, ms: any = 100) => {
    clearTimeout(timer)
    timer = setTimeout(callback, ms)
  }
})()
/** 在卡片内部滚动触发  */
const scrollE = (e: any) => {
  getChild(0).style.transition = `0.4s ease height`
  // console.log(e.target.scrollTop);//滚动条距顶部高度
  // console.log(e.target.scrollHeight );//页面的总高度（所有的）
  // console.log(e.target.clientHeight );//页面的可视高度（能看见的）
  getChild(0).style.height = y.value + "px";
  if (e.target.scrollTop + e.target.clientHeight >= (e.target.scrollHeight - 30)) { // 当滚动条滑到页面底部
    if (!props.noMore) {
      showRefresh.value = true
      y.value = 30;
    }
    debounce(loadMore)
  } else {
    showRefresh.value = false
    y.value = 0;
  }
};
</script>
<style lang="scss" scoped>
.pullDown {
  .pullDownTop {
    width: 100%;
    height: 0px;
    //background-color: skyblue;
    text-align: center;
  }

  .static {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;


    .scroll {
      width: 102%;
      height: 400px;
      overflow-x: hidden;
      overflow-y: scroll;
      position: absolute;

    }
  }

  .pullDownBottom {
    width: 100vw;
    height: 100vh;
    background-color: pink;
  }
}
</style>

因为大佬的组件是h5页面的拖拽动态刷新加载列表(pull),我在此基础上做了web端的简化版本(scroll),同时在css端隐藏一下滚动条,封装好的组件宽度

使用组件代码如下

<common-list class="static" :loading="loading" :no-more="noMore" @loadMore="loadMore">
    <view class="contentBoxClass" ref="contentBox">
        <view class="really" v-for="(element, index) of data" :key="index">
            //自定义卡片内容
        </view>
    </view>
</common-list>Ï

功能代码和参考文章一致  主要的就是一个监听器返回noMore的状态,和loadMore函数进行页码自增后调用函数

站在巨人的肩膀上果然太爽了,再次感谢