vue-infinite-scroll

1.安装

npm install vue-infinite-scroll --save

2.如果多处用到可以考虑在main.js中引入。如果只有单个页面使用，可以考虑在当前页中引入。

import infiniteScroll from 'vue-infinite-scroll'
import Vue from 'vue';（当前页中须引入）
Vue.use(infiniteScroll)

3.使用

 <divv-infinite-scroll="handleInfiniteOnLoad"//页面滚动的回调函数:infinite-scroll-disabled="busy"//false表示执行handleInfiniteOnLoad，true表示不执行:infinite-scroll-distance="10"//页面滚动到离页尾多少像素的时候触发回调函数><div v-for="item in data" :key="item.key"></div></div><div class="noMore" v-if="busy">没有更多了</div>

  data () {return {data: [],busy: false,page：1,//页数}}

  methods: {loadMore() {//调用ajax,当获取到最后一组数据时，this.busy = false},handleInfiniteOnLoad(){//该方法中可以调用loadMore()方法加载数据}}

如果这里没有您需要的，可以参考：官方文档。

vue-infinite-scroll相关推荐

mint-ui 中 Infinite scroll 在tab-container中使用数据全部加载的问题
项目中用到了Infinite scroll 这个组件,但是初始化的时候,getList总会请求两次, 网上查了部分资料,如 <ul class="mui-table-view &quo ...
infinitescroll php,WordPress：增加无限分页（Infinite Scroll）功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案
mint-ui Infinite scroll 重复加载.加载无效的原因及解决方案参考文章: (1)mint-ui Infinite scroll 重复加载.加载无效的原因及解决方案 (2)http ...
无限滚动插件Infinite Scroll
最近一个项目需要用到无限滚动,调查了很多最后用了Infinite Scroll这个插件. 优点 ①ajax的函数是内部已经封装好,所有不需要单独的调用. ②后台返回的形式既可以是静态html形式也可以 ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
Infinite Scroll - jQuery WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
WordPress下拉加载插件Infinite Scroll之手动点击加载实现
本文基于上一篇博文<WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录>而写,上文说到WordPress插件Infinite Scroll的自动加载分页 ...
vue中 @scroll的使用
@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件. 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如: <template><d ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
keep-alive + vuex + mint + Infinite scroll 保存分页列表数据
场景描述在使用mintUI loadmore的时候,假如上拉加载到第三页,查看详情然后后退到列表页,列表组件重置.但是,有的情况是需要组件重置的,比如你在另一个组件添加了一条记录,那么再进入这个组件 ...

vue-infinite-scroll

vue-infinite-scroll相关推荐

最新文章

热门文章