VUE3.0自定义无限滚动组件

一、前言

参考https://blog.youkuaiyun.com/weixin_26717681/article/details/108892649这个做的

二、代码

<template>
  <mycard class="wuxiangundong my-2 py-2 bg-white flex justify-center items-center" ref="wuxiangundong">
    <div class="w-full px-3 mt-1 flex justify-center items-center h-10" v-if="nomore">
      <span class="text-gray-200 select-none">{{completeText}}</span>
    </div>
  </mycard>
</template>

<script lang="ts">
import {defineComponent, onMounted,onUnmounted, ref} from "vue";
export default defineComponent({
  name:"wuxiangundong",
  props:{
    // 加载状态图标
    loadIcon:{
      default:"el-icon-loading",
      typr:String,
    },
    // 加载完成文字
    completeText:{
      default:"没有更多了",
      type:String,
    },
    // 是否触发加载,这个应该没什么用
    jiazaistatus:{
      default: true,
      type:Boolean,
    },
    // 组件挂载完成后，是否立即加载一次
    mashang:{
      default: false,
      type:Boolean,
    },
  },
  setup(prop,context) {
    // 整个标签
    const wuxiangundong:any = ref(null)
    // 显示没有更多
    const nomore = ref(false)
    // 节流状态，默认开启，等待父组件第一次加载结束，关闭节流
    const jieliu = ref(true)
    // 添加监听
    onMounted(() => {
      if(prop.mashang){
        loadMorePosts()
      }
      window.addEventListener("scroll", yanshi)
    })
    // 移除监听
    onUnmounted(() => {
      window.removeEventListener("scroll", yanshi)
    })
    // 触发父组件方法,显示加载图标
    function loadMorePosts(){
      wuxiangundong.value.startload()
      context.emit("get")
    }
    // 获取实时位置
    const handleScroll = ()=>{
      if(!jieliu.value && !nomore.value) {
        console.log("触发一次",jieliu2,jieliu.value,nomore.value)
        const julidibu = document.documentElement.clientHeight + document.documentElement.scrollTop - wuxiangundong.value.$el.offsetTop - wuxiangundong.value.$el.offsetHeight
        if (julidibu > -150) {
          jieliu.value = true
          loadMorePosts()
        }
      }
    }
    let jieliu2 = false
    // 设置延时
    function yanshi(){
      if(!jieliu2 && !jieliu.value) {
        console.log("延时执行一次",jieliu2,jieliu.value,nomore.value)
        jieliu2 = true
        handleScroll()
        setTimeout(() => {
          jieliu2 = false
        }, 400)
      }
    }
    // 父组件完成加载，将节流状态关闭,加载图标关闭,卡片的全局加载关闭
    function completejieliu(){
      jieliu.value = false
      wuxiangundong.value.closeload()
    }
    // 父组件不再加载，显示没有更多，关闭加载图标，关闭卡片全局加载
    function notget(){
      nomore.value = true
      wuxiangundong.value.closeload()
    }
    return {
      wuxiangundong,
      nomore,
      completejieliu,
      notget,
    }
  },
  components:{},
})
</script>

<style scoped>
</style>

我使用的tailwindcss，所有的css都写在html里面了。可以看到很简单的几个class。

三、使用方法

<InfiniteRolling @get="getnewdongtai" ref="mygundong"></InfiniteRolling>


 setup() {
    // 无限滚动ref
    const mygundong:any = ref(null)
    // 滚动加载方法
    function getdate(){
      for (let i=0;i<20;i++){
        newdate.value.push(ceshi.value)
      }
      if(newdate.value.length >= 100){
        mygundong.value.notget()
      }else{
        mygundong.value.completejieliu()
      }
    }
    return{
		mygundong，
		getdate，
	}
}