在项目中集成infiniteScroll无限滚动插件

最新推荐文章于 2024-06-02 09:56:07 发布
最新推荐文章于 2024-06-02 09:56:07 发布
阅读量323 收藏
点赞数
文章标签： html5 javascript css vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46396391/article/details/120056546
版权
本文详细记录了如何将ElementUI的无限滚动插件集成到项目中的步骤，包括下载源码、新建文件、注册组件、引入样式等，并提供了运行成功的案例链接和无限滚动的实现原理链接。通过这些步骤，开发者可以顺利地在自己的项目中使用ElementUI的无限滚动功能。
摘要由CSDN通过智能技术生成

       这篇文章记录集成过程，实现原理在文末有附一个链接，那位大神分析的挺好的。

        公司需要集成一个infiniteScroll无限滚动插件，网上找了一圈，发现还是Element UI最靠谱，决定集成Element UI的插件，贴一下步骤，记录一下。

   1. 找到Element UI的源码，下载

        https://github.com/ElemeFE/element

    2. 在packages新建infiniteScroll文件

        

    3. 把Element UI的源码拷过来

   4. 有引入两个文件，去对应区域引入就好，因为我们公司之前有写过这些代码，我就引用的公司的方法。

 

    5. components.json注册

    6. build入口文件引用

    7.  example下的docs/zh-CN文件下新建infiniteScroll.md文件，这个也是照着ElementUI来的。

  8. example下的demo-styles文件下新建infiniteScroll.scss文件，也是照着ElementUI来的。

     9. 在index.scss中引入样式

    10. 重新运行npm run dev

        结果就和Elemen UI差不多，附一个官方案例，我随便改了改样式。运行成功就集成好了。

        https://element.eleme.cn/#/zh-CN/component/infiniteScroll

        效果如下图所示：

附：无限滚动实现原理

https://github.com/niexia/niexia.github.io/issues/42

六月_miumiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-infinite-scroll:React无限滚动
07-22
在发展中 组件要求 显示选择的一部分（页面）。 监控滚动，并在特定阈值下发出添加项目的请求 可以跟踪上下滚动 知道如何做指定的滚动偏移 该组件接受用于渲染的React对象列表。 它作为参数： page {number} 1 - 呈现页面 pages {number} 1 - 系统中的对象总数。 shift {number} 30 - 向下滚动的百分比。 加载 {function} - 回调。 将当前页面和下一个（请求的）页面作为参数传递。 children {ReactComponents} 阈值：{number} - 下一个请求添加元素的百分比 loader： - 如果对象没有时间加载，则显示一个元素 ＃＃工作原理： 如果 pages> page 移位时，将调用 load (page, reqPage)。 在这种情况下，顶部组件必须将请求页面的新对象添加到子组件。 如果 page
nc-infinite-scroll:用于无限滚动的角度插件
06-04
5. **插件应用**：开发者可以通过集成nc-infinite-scroll插件，轻松地在自己的项目中实现无限滚动功能，而无需从头编写复杂的滚动事件监听和内容加载逻辑。 6. **源码获取与使用**：通过下载"nc-infinite-scroll-...
antd-mobile InfiniteScroll 无限滚动
LeoL1u的博客
03-07 5850
需求背景：做一个分页的无限滚动，第一次用这个ui库，也算是吃了点苦头，好记性不如烂笔头记录一下～ 框架使用：react + hooks; 注意点：： 如果带有搜索功能尽量不使用useeffct的副作用，官网有带搜索的示例。 loadMore函数返回必须为一个promise，否则会引起无限加载的问题。 当加载的页面高度没有撑起loadMore所需的高度时，会再执行一次。 源码是拿 父高度 >= el.top - threshold进行判断执行； 代码部分： js部分。 // 接口 const
推荐一个强大的无限滚动插件：Yii2 Scroll Pager
最新发布
gitblog_00030的博客
06-02 283
推荐一个强大的无限滚动插件：Yii2 Scroll Pager yii2-scroll-pagerInfinite AJAX scrolling for Yii2 ListView widget项目地址:https://gitcode.com/gh_mirrors/yi/yii2-scroll-pager 如果你在寻找一款可以将你的分页列表转化为无缝滚动体验的工具，那么Yii2 Scroll P...
element浅尝辄止7：InfiniteScroll 无限滚动
渣渣砖
08-27 1125
滚动加载：滚动至底部时，加载更多数据。
antdMobile InfiniteScroll无限滚动
weixin_47541876的博客
12-28 1829
antdMobile InfiniteScroll无限滚动
antd List 滚动加载（InfiniteScroll ） react-infinite-scroll-component 重置滚动条
Z_Wonderful的博客
02-21 1017
在页面滚动的时候，infiniteScroll 页面数是自动+1。举个例子，页面加载到第三页，infiniteScroll 无法在重新开始计数，而在某些场景中需要重新开始计数，比如切换月份等（按照需求），page number 需要重新计数。2、容器一定要被撑开并触底，这样才会触发v-infinite-scroll上绑定的方法。1、overflow属性是一定要有的，可以加到父节点或者自身上，否则会报错。改变 infiniteScroll 的 key 值，或加在父级元素上。1.使用useRef。
GMail Infinite Scroll-crx插件
04-03
GMail Infinite Scroll-crx插件解决了这个问题，它通过集成到浏览器中，自动移除了这个分页限制。当用户滚动到页面底部时，扩展程序会无缝加载下一页的邮件，同样，当滚动到顶部时，它会加载上一页的邮件。这一特性...
DN Infinite Scroll-crx插件
04-02
总的来说，DN Infinite Scroll是一款利用现代Web技术提高用户浏览效率的工具，它通过集成在Chrome浏览器中，无缝地与Designer News网站配合，提供了一种更为便捷的内容浏览方式。对于设计爱好者和专业人士来说，这是...
aurelia-infinite-scroll:Aurelia无限滚动
05-18
aurelia-infinite-scroll是的插件，它添加了无限浏览器滚动功能，即Facebook加载。 当自定义属性容器的底部（即div）到达浏览器窗口的底部时，插件应调用自定义表达式-函数，这通常会向容器添加更多元素，从而呈现...
infinitescroll+imagesLoaded+Masonry.zip
03-17
Infinitescroll、imagesLoaded 和 Masonry 是网页开发中三个非常重要的库，它们分别用于实现无限滚动、图片懒加载和网格布局。这个压缩包 "infinitescroll+imagesLoaded+Masonry.zip" 提供了一个整合这三种技术的...
react-infinite-scroll, 一个无限滚动组件用于响应.zip
09-18
react-infinite-scroll, 一个无限滚动组件用于响应 无限滚动有一个活动的fork 在 cassetterocks/react-infinite-scroller 运行。：这里 repo的自述文件仍在这里。
InfiniteScroll:尝试使Web和Mobile上的评分体验更好！
05-06
无限滚动 它是使用ECMAScript5功能构建的插件，并且不依赖于任何DOM操作库。 如果您有收藏品，并且希望使用 标签ex：twitter feed，那么此插件将帮助您减小DOM大小。 试想一下，您可以一次显示10000个没有分页的项目。 如果在Mobile上访问Web应用程序会增加DOM的大小，该怎么办。 如果在使用Adobe PhoneGap开发的混合移动应用程序中发生相同的情况，则应用程序将崩溃。 因此，在这种情况下，InifiteScroll会派上用场！ InfiniteScroll在内部做什么？ 它对列表项进行分块，并根据滚动位置一次显示每个卡盘。 向上滚动：我们从顶部删除元素，然后在列表中向下添加元素。 向下滚动：向上滚动的反之亦然。 有了这个，在任何时候，列表中的浏览器中都有固定数量的DOM元素。 我们使用DOMFragments将项目追加到列表中，因此，
详解无限滚动插件vue-infinite-scroll源码解析
10-17
主要介绍了详解无限滚动插件vue-infinite-scroll源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【React】手写虚拟化无限滚动组件
01-08
前言 react的虚拟化无限滚动有别人写好的，antd的list组件里也有这种虚拟化组件，antd虚拟化列表地址。 由于上次写了一篇浅显的滚动性能优化后发现这种技术可以更大的提升效率，并且上次那篇的蛮力实现的思维走入了死胡同，而这种方案让我立马来了兴趣，想要实现一番。 原理 原理就和我在那篇评论里留言的差不多，就是每次只显示固定的几个div，滚动时把div给换掉。 这东西实现起来难点有下面几个： 一、滚动条的出现 二、可视区域流畅移动 三、闪屏优化 这玩意就不按步骤写了，主要说一下这几个难点是怎么解决的： 滚动条出现 这个难点最简单，但是思路没打开就容易想不到这种虚拟化实现方法。靠空白的div
Infinite-Scroll无限滚动加载数据
08-11
NULL 博文链接：https://hjl87423050.iteye.com/blog/2232973
解决Element的 InfiniteScroll 无限滚动组件报错
weixin_55560445的博客
12-21 2356
问题： 使用Element的 InfiniteScroll 无限滚动组件，代码正常，但是控制台还是会有报错： vue.esm.js?efeb:628 [Vue warn]: Error in directive infinite-scroll inserted hook: “TypeError: Failed to execute ‘observe’ on ‘MutationO...
infinite scroll和masonry实现的json类型瀑布流
The night of summer
03-08 818
#wrapper {margin-left:20px;}                                                                                                                                                 
【VUE】无限滚动之vue-infinite-scroll插件
灵活的小胖砸
05-15 813
安装vue-infinite-scroll 官网是：https://github.com/ElemeFE/vue-infinite-scroll npm install vue-infinite-scroll --save 小编使用的是全局引入 import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll) 页面中使用 <div v-infinite-scroll="loadMore" infinite-scroll
vue3+vite项目里列表需要做无限滚动，有什么好的插件呢
09-14
在 Vue3 + Vite 项目中实现无限滚动可以使用一些常用的插件，例如： 1. vue-infinite-loading：Vue.js 的一个插件，实现了无限滚动加载数据的功能。它可以很容易地与 Vue3 + Vite 项目集成，并且支持多种定制选项。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值