vue中使用vue-infinite-scroll

都要新建一个vue+webpack的项目，建立过程这里不再赘述。

一.vue-infinite-scroll

安装

cnpm  i vue-infinite-scroll --save

main.js中引入

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)

在.vue文件中使用

<ul class="newsList" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="5"><li v-for="(item,index) in newsList"></li>
</ul><div id="loadMore" v-show="droping">加载中</div>
<div id="loadMore" v-show="noMore">没有更多的数据</div>

data () {return {busy:false,newsList: [],moreList : [],i : 0,droping : false,noMore : false}}

methods: {loadMore(){// console.log(111);var _vm = this;this.busy = true;this.droping = true;this.dropDown = false;_vm.i += 1;// setTimeout(() => {var data = {"pageNo": _vm.i,"pageSize": 10,};console.log(newsList);_vm.axios.post('/interaction/getNotice', data).then(function(response) {console.log(response.data.data.data);_vm.moreList = response.data.data.data;if(_vm.moreList.length == 0){_vm.noMore = true;_vm.droping = false;_vm.busy = true;}else{_vm.droping = true;_vm.noMore = false;_vm.moreList.forEach(function(item){_vm.newsList.push(item);})}}).catch(function(error) {console.info(error)});this.busy = false;// }, 1000);}},

注意：

坑一：因为我的后台数据获取比较慢，所以使用定时器会造成我的数据一遍一遍去后台获取直到获取到数据，这样会导致一次下拉会加载到好几页的数据，故将定时器注释。

坑二：在使用vue-infinite-scroll时不需要设置外部元素的宽高，而当使用mint-ui中的infinite-srcoll时必须要设置高度，才可以触发下拉加载的函数。

坑三：在使用过程中必须要将获取到的元素显示到页面上，而我刚开始只想看看获取到了没有，这样会导致不停的触发loadMore函数，获取次数太多，导致我的后台禁止我的访问。loadMore函数停止加载的条件是加载到的数据能够撑到页面底部并且滚轮没有滑动到能够触发loadMore函数的最小距离。

vue中使用vue-infinite-scroll相关推荐

vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
Vue 中 qrcode.vue 生成二维码以及添加中心logo
一.安装插件 npm i qrcode.vue -S 二.使用组件 <template><van-popupv-model="showQr"v-bind=&quo ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
关于Vue中$nextTick的作用及实现原理(Vue进阶)
Hello,大家好,最近找工作的路途依然艰难,但是要一直保持对技术的热爱!今天继续跟大家探索一下Vue进阶的内容,这次研究一下Vue的全局API中的$nextTick,这是一个很常用,也是经典的API ...
聊聊 Vue 中 provide/inject 的应用
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
vue核心面试题：Vue中相同逻辑如何抽离？
一.mixin 使用vue中的Vue.mixin,给组件每个生命周期.函数等混入一些公共的逻辑,另外混入对象的钩子将在组件自身钩子之前调用..mixin可以放在全局使用,也可以放在组件中使用. vue ...
vue中 @scroll的使用
@scroll 是 Vue 中的一个修饰符,可以用来监听元素的滚动事件. 使用方法: 在元素上绑定一个 @scroll 修饰符,并绑定一个事件处理函数,如: <template><d ...
vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
mint-ui在vue中的使用。
首先放上mint-ui中文文档近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码.github上面的分享,里面都是markdown文件,内容就是网上的文档刚好自己 ...
vue中如何实现全全全屏和退出全屏？
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂 " 最近总有人给我说ta有社恐,明明是有社牛好不好-- 前言在做大屏界面的时候,客户有个要求,一进去登录成功之后,要有全屏 ...

vue中使用vue-infinite-scroll

一.vue-infinite-scroll

vue中使用vue-infinite-scroll相关推荐

最新文章

热门文章