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 这款 ...
随机推荐
- 搞IT产品,请谨记Mobile First
我们在哪儿? 作为一名企业IT的老鸟,发现一个比较有意思的事情,就是我们的企业IT产品,仍然投入大量的精力,在基于PC的WEB端的设计和交付上,而在APP上的,移动端的考虑,一直都是在PC搞完之后,再 ...
- milvus安装及其使用教程
milvus 简介 milvus是干什么的?通俗的讲,milvus可以让你在海量向量库中快速检索到和目标向量最相似的若干个向量,这里相似度量标准可以是内积或者欧式距离等.借用官方的话说就是: Milv ...
- 详解TCP连接的“三次握手”与“四次挥手”(上)
一.TCP connection 客户端与服务器之间数据的发送和返回的过程当中需要创建一个叫TCP connection的东西: 由于TCP不存在连接的概念,只存在请求和响应,请求和响应都是数据包,它 ...
- HDU 1520 Anniversity party
There is going to be a party to celebrate the 80-th Anniversary of the Ural State University. The Un ...
- 【译】Visual Studio 2019 中 WPF & UWP 的 XAML 开发工具新特性
原文 | Dmitry 翻译 | 郑子铭 自Visual Studio 2019推出以来,我们为使用WPF或UWP桌面应用程序的XAML开发人员发布了许多新功能.在本周的 Visual Studio ...
- ceph 网络配置
ceph 网络配置 9. 分离 public network 和 cluster network 9.1 分离的好处 (1)提高性能:消除副本创建.数据恢复和再平衡对 public network 的 ...
- CSS让高度百分百的方案
一般用来上下所有居中,但是这时候auto的计算是全屏像素,从而得到满屏 position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; m ...
- zabbix环境搭建部署(一)
Linux高端架构师课程 Linux实战运维国内NO.1全套视频课程 QQ咨询:397824870 > 监控报警 > zabbix环境搭建部署(一) zabbix环境搭建部署(一) 监 ...
- 【HttpClient】使用学习
HttpClient使用学习 HttpClient Tutorial:http://hc.apache.org/httpcomponents-client-4.5.x/tutorial/html/in ...
- JAVA使用SnakeYAML解析与序列化YAML
1.概述 本文,我们将学习如何使用SnakeYAML库将 YAML文档转换为Java对象,以及JAVA对象如何序列化为YAML文档. 2.项目设置 要在项目中使用SnakeYAML,需要添加Maven ...