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. 新装ubuntu电脑的一些调整

    必要命令的安装 必要开发工具的安装 更换国内软件源 /etc/apt/sources.list文件,后面添加下面地址用来添加阿里源 deb http://mirrors.aliyun.com/ubun ...

  2. 剖析 Docker Swarm 操作对容器端口影响

    剖析 Docker Swarm 操作对容器端口影响 一.背景阐述 在使用 Docker Swarm 构建集群环境过程中,于 ts3 节点出现了原有的容器端口全部失效,手动重启后才恢复的情况.期间涉及 ...

  3. JVM 的组成

    JVM 的组成 JVM(Java Virtual Machine)是 Java 的核心组件,负责执行 Java 字节码程序.以下是 JVM 的主要组成部分: 1. 类加载子系统(Class Loade ...

  4. 基于Kubernetes可扩展的Selenium 并行自动化测试部署及搭建(2)——Win10环境下Kubernetes(k8s)部署

    继续上一篇,本篇进行K8S环境部署. K8s部署: 1.  访问k8s-for-docker-desktop 的github地址: https://github.com/AliyunContainer ...

  5. AD 侦查-SMB_2

    本文通过 Google 翻译 AD Recon – NetBIOS (137/138/139) and SMB (445) Part-2 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校 ...

  6. 迭代器失效:99%的C++程序员都会踩的坑 !

    大家好,我是小康. 你踩过这个坑吗?为什么我的程序明明很简单,却总是莫名其妙地崩溃! 嘿,各位 C++ 爱好者们,今天咱们聊一个几乎所有 C++ 程序员都会踩的坑--迭代器失效.无论你是刚入门的新手, ...

  7. wqs 二分

    初看这个东西可能很难理解,我个人也学习了很多遍,然后发现这个直接理解实际上并不难. wqs 二分主要是解决 恰好分成/选 \(k\) 段 这一类 DP 问题的算法.如果不知道形式可以看一下 P4983 ...

  8. 仿EXCEL插件,智表ZCELL产品V1.9 版本发布,增加导入、导出EXCEL功能

    详细请移步 智表(ZCELL)官网www.zcell.net 更新说明  这次更新主要应用户要求,主要增加了导入.导出EXCEL文件功能,并增加了获取单元格公式.显示值等功能,欢迎大家体验使用. 本次 ...

  9. Flex布局-子项

    弹性盒子是一种用于 按行 或 按列的一维布局方法. 元素可以膨胀以填充额外的空间, 也可以 收缩 以适应更小的空间. flex 容器项重点 只是用表格进行排版而已, 横向内容无关联哈, 只是简要回忆一 ...

  10. TVM: 编译深度学习模型的快速入门教程

    支持的TVM硬件后端概述 下图显示了 TVM 目前支持的硬件后端: 在本教程中,将选择 cuda 和 llvm 作为目标后端.首先,让导入 Relay 和 TVM. import numpy as n ...