vue3-infinite-list是一个针对vue3的短小精悍的无限滚动组件,它体积非常小、零依赖gzip只有 3kb。虽然vue相关的无限滚动开源组件也有很多,但是对比同类产品vue3-infinite-list依然有不少自己的特点,并且它完全使用vue3 setup api + typescript编写,项目LOGO是一只千足毛毛虫😃 。 特性 体积小 & 零依赖– gzipped...
紧接着开启观察者 API来判断交叉比例,如果为 1,那么调取fetchData函数填充我们的list即可。 接下来你只需要在每个需要用到的页面里去调取这个函数即可。 六. 源码 import { ref, nextTick } from "vue"; export function useInfiniteLoad(fetchListFn: () => Promise<any[]>) { const data = ref<any[]>...
1. vue3-infinite-scroll-better vue3-infinite-scroll-better是Vue3的滚动加载插件,它支持所有vue-infinite-scroll的用法,并修复了一些bug。 安装 你可以通过npm或yarn来安装这个插件: bash npm install vue3-infinite-scroll-better --save # 或者 yarn add vue3-infinite-scroll-better 使用 首先,在你的Vue...
createVNode, render, ref, reactive }from'vue';import{ useScroll }from"../hooks/useScroll.ts";constlist: any[] =reactive([]);letidx =0;functiongetList() {returnnewPromise((res,rej) =>{if(idx<=30)
list.value.length === totalList.value.length) { tableDom.scrollTop = 0; } setTimeout(loadNextPage, 500); // 延迟500毫秒加载下一页数据 } } }, 100); }; const loadNextPage = () => { if (currentPage * pageSize < totalList.value.length) { currentPage++; list.value =[...list...
用Vite 创建一个项目: npm i -g vite@2.8.5 npm init vite@latest 在局域网内运行项目: package.json "scripts":{"dev":"vite --host", 在Vite 项目中安装 tailwindcss: npm i -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.
一个支持百万数量级的Vue3无限滚动列表组件. Contribute to tnfe/vue3-infinite-list development by creating an account on GitHub.
英文| https://javascript.plainenglish.io/a-quick-vue3-infinite-scrolling-component-daily-vue-tips-4-20c7052ccda4 如果你在社交媒体上停留的时间过长,那么,你所在的网站很可能正在使用无限滚动组件。 无限滚动组件是在用户向下滚动页面时加载新内容,而不是将其分成...
英文| https://javascript.plainenglish.io/a-quick-vue3-infinite-scrolling-component-daily-vue-tips-4-20c7052ccda4 如果你在社交媒体上停留的时间过长,那么,你所在的网站很可能正在使用无限滚动组件。 无限滚动组件是在用户向下滚动页面时加载新内容,而不是将其分成多个页面。
首先,大篇文章会告诉你,你不会不知道吧第一步需要安装vue-infinite-scroll,然后再全局引入,并作为插件注册。现在我告诉你这种做法这几年已经失效!你需要做的是从你安装的element-plus中引入InfiniteScroll,并进行插件的注册,做法如下: importInfiniteScrollfrom"element-plus";constapp=createApp(App);app.use(Infinite...