vue 无限滚动问题
如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能。
当前找到两个插件
1 element-ui的infiniteScroll无限滚动(适合vue2,vue3)
infiniteScroll是2.9.0版本新增的特性,旧的项目需要升级element版本(注意升级可能导致其他页面的无措,谨慎升级)
链接 https://element.eleme.cn/2.12/#/zh-CN/component/infiniteScroll
<template>
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>
</template> <script>
export default {
data () {
return {
count:
}
},
methods: {
load () {
this.count +=
}
}
}
</script>
2vue-infinite-scroll(官网https://github.com/ElemeFE/vue-infinite-scroll)只适合vue2
步骤 1 npm install vue-infinite-scroll --save
2 import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
使用示例,此处只写相关代码
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="">
<div v-for="item in data" :key="item.index">{{item.name}}</div>
</div>
data () {
return {
count: ,
data: [],
busy: false
}
}
methods: {
loadMore: function() {
this.busy = true
setTimeout(() => {
for (var i = , j = ; i < j; i++) {
this.data.push({name: this.count++ })
}
console.log(this.data)
this.busy = false
}, )
}
}
效果 默认会载入10行数据,只要往下滚动到页面底部,就会在1秒后再次加载10条,然后继续滚动,又会加载10条,实际情况到一定程度停止刷新
参数解释
v-infinite-scroll="loadMore"
表示回调函数是loadMore
infinite-scroll-disabled="busy"
表示由变量busy
决定是否执行loadMore
,false
则执行loadMore
,true
则不执行,看清楚,busy表示繁忙,繁忙的时候是不执行的。 infinite-scroll-distance="10"
这里10
决定了页面滚动到离页尾多少像素的时候触发回调函数,10
是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance
的值即可。
infinite-scroll-immediate-check
默认值为true
,该指令意思是,应该在绑定后立即检查busy的值和是否滚动到底。如果你的初始内容高度不够高、不足以填满可滚动的容器的话,你应设为true
,这样会立即执行一次loadMore
,会帮你填充一些初始内容。 infinite-scroll-listen-for-event
当事件在Vue实例中发出时,无限滚动将再次检查。 infinite-scroll-throttle-delay
检查busy
的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理就是,vue-infinite-scroll会循环检查busy
的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行
vue 无限滚动问题的更多相关文章
- 一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解
开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现.接下来我们一起看下它的配置及使用方式. 首先我们先了解下他的配置参数: v-in ...
- Vue 无限滚动加载指令
也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的 底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结 ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- Vue组件封装之无限滚动列表
无限滚动列表:分为单步滚动和循环滚动两种方式 <template> <div class="box" :style="{width:widthX,hei ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- v-infinite-scroll无限滚动
v-infinite-scroll="loadMore"表示回调函数是loadMore infinite-scroll-disabled="busy"表示由变量 ...
- iOScollectionView广告无限滚动(Swift实现)
今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
随机推荐
- 漫谈边缘计算(三):5G的好拍档
边缘计算的热度迅速攀升,还有一个不得不提的因素,就是5G的发展. [5G推动云计算从集中化向分布式演进] 在第一篇文章(<漫谈边缘计算(一):边缘计算是大势所趋>)中我提到,传统的云计算技 ...
- k8s 开船记-触礁:四涡轮发动机撞坏3个引发502故障
(图片来自网络) 非常抱歉,这次开船触礁故障给您带来麻烦了,请您谅解. 在我们昨天发布 k8s 开船记首航博文后,有园友在评论中发来贺词——“泰坦尼克号出发了[狗头]”,借此吉言,今天船就触礁了,还好 ...
- 【JS】304- KOA2框架原理解析和实现
); , () => { ); 实现koa的第一步就是对以上的这个过程进行封装,为此我们需要创建application.js实现一个Application类的构造函数: ); , () ...
- 布隆过滤器的demo
/** * 缓存击穿 * @author * */ @RunWith(SpringJUnit4ClassRunner.class) @ContextConfiguration(locations = ...
- CentOS6和CentOS7进入单用户模式重置root密码
一.前言 如果在Linux系统下root密码丢失或者需要破解物理机器用户密码,可以通过进入系统单用户模式进行重置root密码.本文介绍CentOS6和CentOS7两个系统版本进行root密码重置. ...
- linux指令-date
1.在linux中要显示日期,则可以直接输入指令date 2.如果想以这样2016/12/26的方式输出呢,那就是,Y是年份,m是月份,d是日 date +%Y/%m/%d 3.如果要显示时间,则da ...
- 图文结合深入理解JS中的this值
文章目录 Js 中奇妙的this值 1. 初探this 2. this指向总结 2.1 普通函数调用 2.2 对象的方法调用 2.3 构造函数调用 2.4 利用call,apply,bind方法调用函 ...
- 【Springboot】用Springboot Admin监控你的微服务应用
1 简介 目前,微服务大行其道,各大小公司争相学习模仿,把单体应用拆得七零八落.服务多了,运行的实例多了,给运维人员的压力就更大了.如果有十几个应用,单单做Health Check就已经够费时间的了. ...
- 使用saltstack自动部署K8S
使用saltstack自动部署K8S 一.环境准备 1.1 规划 1. 操作系统 CentOS-7.x-x86_64. 2. 关闭 iptables 和 SELinux. 3. 所有节点的主机名和 I ...
- Nginx代理缓存功能
Nginx代理缓存功能 Nginx缓存主要是用于减轻后端服务器的负载,提高网站并发量,提升用户体验度. 注意:Nginx反向代理的缓存功能是由ngx_http_proxy_module提供, ...