vue-infinite-scroll支持vue3
2023-09-11 14:17:27 时间
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甲乙丙丁少
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- 【Vue】Vue3脚手架使用font-awesome字体图标的解决方案
- 【Vue | vue3】Vue2和Vue3中Element-Ui 的安装与使用
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue3.x中使用AntV G6绘制力导图实现自适应
- Vue2.0 搭建Vue脚手架(vue-cli)
- Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~
- Vue 动态粒子特效(vue-particles)
- vue学习笔记七:Jquery VS Vue之杂项方法明细对照
- VUE3实用组件开发合集一:数字滚动组件
- vue3组件基础,组件引用与使用、向子组件传递数据与事件prop、emit
- vue3+ts+vite之路由组件的搭建
- 使用Vue3学习Vue的基础知识
- 浅析Vue3 CompositionAPI如何替换Vue Mixins:mixin的缺点(命名冲突、隐式依赖)、CompositionAPI如何解决这些缺陷(代码提取、代码重用)
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- Vue-cli 4在vue.config.js中配置别名
- vscode快速生成vue代码---创建Vue代码模板
- vue3:直接修改reative的值,页面却不响应,这是什么情况?