vue-infinite-scroll支持vue3
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)
示例源码:在根目录下的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的更多相关文章
- Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- JavaScript Infinite scroll & Masonry
// infinitescroll() is called on the element that surrounds // the items you will be loading more of ...
- Infinite scroll has been called autopagerize, unpaginate, endless pages
http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...
- 网页浏览 infinite scroll效果知识
infinite scroll 类似一些网站, 例如京东搜索商品, 浏览到最后一页,自动加载新的商品. 一则可以加快首页响应速度, 二则减轻带宽和服务器荷载. 这么多商品信息一次性返回给客户端也是不可 ...
- mint ui解决Navbar和Infinite scroll共存时的bug
Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载. 只需要判断一下就可以了,代码: html: <mt-navbar v-model="s ...
- infinite scroll blogs
infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...
- infinite auto load more & infinite scroll & load more
infinite auto load more & infinite scroll & load more https://codepen.io/xgqfrms/pen/NZVvGM ...
- Vue history模式支持ie9
vue 路由里面的history能让浏览器显示平常一样的链接,可以去掉#这种,但是在ie9下面会强制变成hash,因为history不支持ie9自动降级,可能就会影响美感,解决:可以在路由里面添加fa ...
- idea 添加 VUE 的语法支持和开发
<一>VUE的开发分两种,一种是直接在HTML文件中使用,一种是VUE文件的形式开发 1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting ...
随机推荐
- 新装ubuntu电脑的一些调整
必要命令的安装 必要开发工具的安装 更换国内软件源 /etc/apt/sources.list文件,后面添加下面地址用来添加阿里源 deb http://mirrors.aliyun.com/ubun ...
- 剖析 Docker Swarm 操作对容器端口影响
剖析 Docker Swarm 操作对容器端口影响 一.背景阐述 在使用 Docker Swarm 构建集群环境过程中,于 ts3 节点出现了原有的容器端口全部失效,手动重启后才恢复的情况.期间涉及 ...
- JVM 的组成
JVM 的组成 JVM(Java Virtual Machine)是 Java 的核心组件,负责执行 Java 字节码程序.以下是 JVM 的主要组成部分: 1. 类加载子系统(Class Loade ...
- 基于Kubernetes可扩展的Selenium 并行自动化测试部署及搭建(2)——Win10环境下Kubernetes(k8s)部署
继续上一篇,本篇进行K8S环境部署. K8s部署: 1. 访问k8s-for-docker-desktop 的github地址: https://github.com/AliyunContainer ...
- AD 侦查-SMB_2
本文通过 Google 翻译 AD Recon – NetBIOS (137/138/139) and SMB (445) Part-2 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校 ...
- 迭代器失效:99%的C++程序员都会踩的坑 !
大家好,我是小康. 你踩过这个坑吗?为什么我的程序明明很简单,却总是莫名其妙地崩溃! 嘿,各位 C++ 爱好者们,今天咱们聊一个几乎所有 C++ 程序员都会踩的坑--迭代器失效.无论你是刚入门的新手, ...
- wqs 二分
初看这个东西可能很难理解,我个人也学习了很多遍,然后发现这个直接理解实际上并不难. wqs 二分主要是解决 恰好分成/选 \(k\) 段 这一类 DP 问题的算法.如果不知道形式可以看一下 P4983 ...
- 仿EXCEL插件,智表ZCELL产品V1.9 版本发布,增加导入、导出EXCEL功能
详细请移步 智表(ZCELL)官网www.zcell.net 更新说明 这次更新主要应用户要求,主要增加了导入.导出EXCEL文件功能,并增加了获取单元格公式.显示值等功能,欢迎大家体验使用. 本次 ...
- Flex布局-子项
弹性盒子是一种用于 按行 或 按列的一维布局方法. 元素可以膨胀以填充额外的空间, 也可以 收缩 以适应更小的空间. flex 容器项重点 只是用表格进行排版而已, 横向内容无关联哈, 只是简要回忆一 ...
- TVM: 编译深度学习模型的快速入门教程
支持的TVM硬件后端概述 下图显示了 TVM 目前支持的硬件后端: 在本教程中,将选择 cuda 和 llvm 作为目标后端.首先,让导入 Relay 和 TVM. import numpy as n ...