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 这款 ...
随机推荐
- 大型情感剧集Selenium:2_options设置 #华为云·寻找黑马程序员#
上集回顾 昨天说简单介绍了什么是selenium,它能干what,和发展史与梗概.当的是python如何通过pip安装selenium,并下载对应浏览器的webdriver. 最后简单通过一个Demo ...
- 关于Python中的错误与异常,你是否了解的够仔细?
每次版本结束都描述这着同样的错误,相似的问题,但始终没见解决.所以今天,我就来总结下Python的错误与异常! 异常与错误 错误 语法错误 可以通过IDE或者解释器给出提示的错误 opentxt('a ...
- 用Cocoapods并结合Github管理,导入,更新,下载自己的SDK
转自:http://www.jianshu.com/p/129d3c315ea6
- HDU4918 Query on the subtree 点分治+树状数组
bobo has a tree, whose vertices are conveniently labeled by 1,2,…,n. At the very begining, the i-th ...
- 洛谷 题解 P1351 【联合权值】
Problem P1351 [联合权值] record 用时: 99ms 空间: 13068KB(12.76MB) 代码长度: 3.96KB 提交记录: R9883701 注: 使用了 o1 优化 o ...
- Local Model Poisoning Attacks to Byzantine-Robust Federated Learning
In federated learning, multiple client devices jointly learn a machine learning model: each client d ...
- php 温故而知新 好久不用 又得继续学习下
1.php注释:/* */.//.#等三种方式2.echo:向浏览器输出字符串,echo其实是一个函数:返回值:无3.print:向浏览器输出字符串,它也是一个函数:返回值:整型. ...
- 【Cute-Webpack】Webpack4 入门手册(共 18 章)
介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...
- Vue中兄弟组件间传值-(Bus/总线/发布订阅模式/观察者)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS基础-BOM
BOM BOM 是 browser object model 的缩写, 简称浏览器对象模型. 主要处理浏览器窗口和框架, 描述了与浏览器进行交互的方法和接口, 可以对浏览器窗口进行访问和操作, 譬如可 ...