vue3-infinite-scroll-good

简介 (introduce)

vue-infinite-scroll的vue3版本,所有用法和vue-infinite-scroll一致。

vue3 version of vue-infinite-scroll. All usages are consistent with vue-infinite-scroll

其代码也是基于它做了简单修改,并修复了一些bug,比如重复两次请求等问题。

The code is also based on it, made simple modifications, and fixed some bugs, such as repeated requests twice.

示例 (Example)

预览效果:Demo

preview:Demo

示例源码:在根目录下的example中

Example source code: in example under the root directory

安装 (install)

yarn add vue3-infinite-scroll-good

使用 (use)

// 全局注册 mian.js
import infiniteScroll from 'vue3-infinite-scroll-good'
createApp(App).use(infiniteScroll).mount('#app');
// 组件使用
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>
var count = 0; new Vue({
el: '#app',
data: {
data: [],
busy: false
},
methods: {
loadMore: function() {
this.busy = true; setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: count++ });
}
this.busy = false;
}, 1000);
}
}
});

其他(other)

喜欢就给个star

Give a star if you like

百度甲乙丙丁少

Google甲乙丙丁少

vue-infinite-scroll支持vue3的更多相关文章

  1. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  2. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  3. JavaScript Infinite scroll & Masonry

    // infinitescroll() is called on the element that surrounds // the items you will be loading more of ...

  4. Infinite scroll has been called autopagerize, unpaginate, endless pages

    http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...

  5. 网页浏览 infinite scroll效果知识

    infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...

  6. mint ui解决Navbar和Infinite scroll共存时的bug

    Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...

  7. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

  8. infinite auto load more & infinite scroll & load more

    infinite auto load more & infinite scroll & load more https://codepen.io/xgqfrms/pen/NZVvGM ...

  9. Vue history模式支持ie9

    vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...

  10. idea 添加 VUE 的语法支持和开发

    <一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...

随机推荐

  1. ESP32系列,IDF官方实例——外设:通用GPIO

    示例位于 \examples\peripherals\gpio\generic_gpio 文件夹内 GPIO示例逻辑简单,直接看代码理解. /* GPIO示例 此示例代码位于公共域(或CC0许可,由您 ...

  2. apk签名问题

    https://www.jianshu.com/p/0bd7b6d6e068 https://blog.51cto.com/u_15520037/5703487

  3. ocr识别遇到的小问题-图片的EXIF 元数据

    背景   之前在公司通过paddleocr写了个接口,传入图片的base64编码返回识别出的文字信息.但是图片为横向时,文字行会乱序,所以准备新加一个功能通过paddleclas推理图片文字的倾斜角度 ...

  4. .NET周刊【3月第5期 2025-03-30】

    国内文章 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(四):结合BotSharp智能体框架开发语音交互 https://www.cnblogs.com/GreenShad ...

  5. OneNote Embedded 文件滥用检测

    本文分享自天翼云开发者社区<OneNote Embedded 文件滥用检测>,作者:Icecream 攻击技术 在这些网络钓鱼活动中被滥用的OneNote功能是在图片后面隐藏嵌入式文件,诱 ...

  6. EFCore与List的随机算法

    IQurable<T>,数据库层面的随机,OrderBy(x => EF.Functions.Random()); _coreDbContext.org.OrderBy(x => ...

  7. json格式转为List集合

    一.JSON格式 {"code":"200","msg":"success","data":[&qu ...

  8. vault

    目录 Vault使用场景 数据加密 访问控制 有时间限制的访问 灾备恢复 基于身份(Identity)的安全性 人类和机器认证 静态和动态secrets的Secrets engines Install ...

  9. 编译原理:python编译器--从AST到字节码

    首先了解下从AST到生成字节码的整个过程: 编译过程 Python编译器把词法分析和语法分析叫做 "解析(Parse)", 并且放在Parser目录下. 从AST到生成 字节码的过 ...

  10. 编译原理:剖析python编译阶段

    Python编译器 GDB跟踪python编译器的执行过程,在tokenizer.c的tok_get()函数中打一个断点,通过GDB查看python的运行,使用bt命令打印输出,结果如下图所示 整理后 ...