规律是每次请求回来的list如果是空就会触发无限加载。

use case: Chat messages

这个问题主要出在 Vue，指令的 bind / unbind 钩子只会在所属组件 ready / destroyed 时触发，当使用 keep-alive 的时候，问题来了。

DEMO：https://jsfiddle.net/banricho/jrchrxp9/

在这个插件上的体现就是，当组件被 keep-alive 挂起，滚动时依然在触发事件。

Any chance of having Bower support? I am happy to do a pull request for the bower.json and register the package.

单页面应用里面，我从a页面进入b页面，在b页面里请求b页面的接口，但是不知道为什么这时候也会请求a页面的接口。很怪异。a和b页面都是这么添加的：

 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            ...
</div>

 directives: {infiniteScroll};//使用Vue.use(infiniteScroll)也会这样

但是如果我直接在b页面（或者说在b页面进行刷新），而不是从a进入b，就不会重复去请求a页面的接口了。

Currently It excutes function inside v-infinite-scroll each time the scroll event is emitted no matter what the direction is (both up and down).

But we do only want it when we scroll down to the page, am I right?

因为遍历的是组件 这种情况该如何处理

A simple example on adding new records with each 'loadMore' method upon infiniteScroll.

Strangely though, inside my chrome, adding 25 records per event will only allow me to infiniteScroll twice.
This behavior seems to be similar when i only add 10 records.
But adding 20, 40, or even 100 records per event will allow me to infiniteScroll infinitely.
See ADD_ROW_AMOUNT for the amount of records constant.

https://jsfiddle.net/kvcphx01/4/

For the time being, i will stick to either 40 or 100.

可以实现 向上滚动加载更多 么？例如聊天记录查询，向上滚动查看更多聊天记录

Hi,

Have you planned on porting this directive to vue 2 ?
The current version doesnt work with vue 2, with vue 2 you can't use this to refer to the directive.

You can find more details here :
vuejs/vue#2873

Im getting the following error: TypeError: Cannot read property 'context' of undefined. Is this related to my vuejs version? (Im using vue 1).

Does this lib supports vue2 only? What npm version do I have to point to get the vuejs1 support?

Thanks in advanced!

source
如果这里的element是window,
getElementTop就会报错
这里应当加个判断

<div class="list-box" v-infinite-scroll="loadingMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0"> <ul class="list" v-show="type=='xiangkan'"> <li v-for="item in xiangkanList" @click="goXiangkanDetail(item.id)"> <message-item :item="item"></message-item> </li> </ul> <ul class="list" v-show="type=='counselor'"> <li v-for="item in counselorList" @click="goCounselorIndex(item.wx_userid)"> <counselor-item :item="item"></counselor-item> </li> </ul> </div>

data(){ return{ swipes:{ activeIndex:0, //banner默认位置 imgs:[], //banner图地址 }, loading:false, //是否显示加载动画 topicList:[], //专题推荐数据 newsList:[], //行业热点数据 xiangkanList:[], //热门提问 counselorList:[], //顾问列表 type:'xiangkan', //标记当前是显示热门提问还是顾问列表 getData:false, //标记是否加载完数据 scrollY:0, //记录页面离开的位置 busy: false, //是否允许无限加载,true为禁止 showLoadMore: false, //是否显示加载更多动画 } },

loadMore(){ console.log('loadmore'); alert('loadingmore'); this.showLoadMore = true; this.busy = true; if(this.type == 'xiangkan'){ this.loadList(this.xiangkanList.length).then(res=>{ this.xiangkanList = this.xiangkanList.concat(res.data.data.list); this.showLoadMore = false; this.busy = false; }) }else if(this.type == 'counselor'){ this.loadCounselor(this.counselorList.length).then(res=>{ this.counselorList = this.counselorList.concat(res.data.data.list); this.showLoadMore = false; this.busy = false; }) } }

import infiniteScroll from 'vue-infinite-scroll'; import * as Const from './const/config'; var weixin = require('./utils/weixin'); Vue.use(http,'$http'); Vue.use(infiniteScroll);

html

<div class="event-list" 
            v-infinite-scroll="loadData()" 
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="10">
           .....
</div>

js

import Vue from 'vue';
import InfiniteScroll from 'vue-infinite-scroll';
Vue.use(InfiniteScroll);
export default {
    methods: loadData: function(){
        this.busy = true;
        this.$http.get('').then(function(resp){
               this.busy = false
       })
    }
}

Anything on the roadmap with respect to supporting SSR?

I get a "document is not defined" when rendering on the server for the obvious reason that the server has no document.

多个Navbar无限滚动如何处理？

Apple (and others), in all their wisdom, made it popular to have upward infinite scrolling text messaging apps. It would be awesome to build a similar concept with this and be able to specify whether it was within X pixels from the top of the div and load more.

This could apply to viewing time-based logs where you could start off at one point in the middle of the log and then either scroll up or down and load more in either direction.

比如聊天记录之类的，需要倒序浏览。

电脑chrome浏览器会这样，手机端也是

this code from the paragraphs example simply doen't work for me.

Any other examples or ideas?

Implemented the code, and it worked great on desktop, but when I use it with my phone, it doesnt fires the load more event....

any ideas?

I'm getting the error above and the console it happens here. Am I missing something in my code?
Thanks

unbind: function unbind(el) {
      el[ctx].scrollEventTarget.removeEventListener('scroll', el[ctx].scrollListener);
    }

需要加载数据的页面 部分代码：
`

当tempUserOrderList1有且只有一条数据时，页面操作数据后，重新加载变为0，报错：
Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
vue.common.js?1090:3337
导致当前页面卡死，不能点击。

去掉v-infinite-scroll loadMore相关代码后正常。

请大神看看什么问题，如何解决？ 跪谢！~

Hi

I am getting following error Uncaught TypeError: plugin.apply is not a function when applying it globally. using Vue.use

github上的Unbind的removeEventListener判断是否为空的bug已经修了，是不是没有发布到npm,npm拉不到最新代码

when i use it in WeChat android is ok but in ios can't stop the default touch event It need to release the finger to make it work

Basically what is happeneing is the method gets called on page load and then never again. I have my script like so:

<ul class="styled-list"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">

      <li class="list-head">
        <div>Name</div>
        <div>Month</div>
        <div>Year</div>
      </li>

      <li class="list-body" v-for="account in accounts">
        <div>@{{ account.name }}</div>
        <div v-bind:class="account.month_class" >@{{ account.month_diff }}%</div>
        <div v-bind:class="account.year_class" >@{{ account.year_diff }}%</div>
      </li>

    </ul>


<script src="https://unpkg.com/[email protected]"></script>

  <script type="text/javascript">

      var vm = new Vue({
          el: '.table-wrap',
          data: {
              accounts: [],
              moreAccounts: [],
              busy: false,
              data: []
          },
          mounted:  function() {

            var dist = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);

            this.$http.get( '/api/accountsByDistributor?dist='+dist+'&order=desc&order_by=current_year&limit=10' ).then(function (response){

                vm.accounts = response.body;
               
            }, function (response){
                  console.log(response);
            });

            this.$http.get( '/api/accountsByDistributor?dist='+dist+'&order=desc&order_by=current_year&limit=-1' ).then(function (response){

                vm.moreAccounts = response.body;
               
            }, function (response){
                  console.log(response);
            });

          },
          methods: {
            loadMore: function() {

              this.busy = true;

              console.log(this.moreAccounts.length);

              if(this.moreAccounts.length > 0)
              {
                setTimeout(function () 
                {
                    var temp = [];
                    for (var i = this.moreAccounts.length; i <= this.moreAccounts.length + 10; i++) {
                        temp.push( this.moreAccounts[i] );
                    }

                    this.accounts = this.accounts.concat(temp);
                    
                }.bind(this), 1000);
              }
              
            }
          }
      });

  </script>

Not sure if its due to some css thing (I have see overflow: auto; messing things up but I dont have this set on any containers. )

安卓机上，会一次一次的触发完所绑定的load event，ios就没有这个问题？

Hi, thanks for the plugin,
but i need to know if it's possible to trigger the loadMore content, only when i'm scrolling to the bottom, and not on top. Or maybe i'm not understanding how it works the trigger.

¿Will this support the new version?
¿Could that be listed in the README.md?

在ajax回调中改变infinite-scroll-disabled的值，无效。
如果是文档说明中的，set time out 中设置是可以的。

I can across an issue while using this with Vue Router's $loadingRouteData. I had something along the lines of:

<div v-if="$loadingRouteData">loading...</div>
<div v-else>
    <table>
        <tbody v-infinite-scroll="loadMore()">
            ...
        </tbody>
    </table>
</div>

This resulted in unbind being called on your directive before scrollEventTarget was set. This may be due to me structuring my application in a silly fashion I don't know. But this does result in Vue crashing as unbind is called before the asynchronous doBind function is complete.

Let me know if I can give any more information. Thanks for the library - otherwise it's working great.

After install directive as Vue.use(infiniteScroll) inside app.js, and use directive in div element I have next error:

一直不停地调用加载方法。根本停不下来。。。

              this.busy = true;
             var _ = this;
          $.get('getCollectList',vd,function(res){
            if(res.falg == 'success'){
                _.content = res.data.content;
                _.busy = false;
            }

感觉你们做的效果，体验都挺不错，可是我用却老是出问题，忧伤啊

• node version: 7.7.1
• npm version: 4.1.2

run npm run build and it shows

resolve failed: Error: Cannot find module 'babel-runtime'

see ref

Can this work for upwards scrolling, like loading chat messages (most recent are at the bottom, scroll up to load older messages) ?

手机上滑动会出现重复请求问题，设置了true,没效果

我使用的是 vue-router 路由。
我在 list 页使用了 v-infinite-scroll="load1()" 滚动加载一切正常。
点击 list 中某一条记录前往 detail 页，detail 页也有 v-infinite-scroll="load2()"
此时，如果滚动 detail 页，会同时触发 load1() 和 load2() 两个函数，这不是我所期望的，按我理解，load1() 应该在 list 页面 deactivate 时就解除绑定滚动的。但实际并没有。

支持vue2.0么，好像支持

Have you an example app - for look realised infinite scroll?

Just a question, why not use Vue.use to register the directive globally if we really want global directive.

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

And it will be so good if we can register the directive where we actually need it:

import infiniteScroll from 'vue-infinite-scroll/directive'

new Vue({
  directives: {infiniteScroll}
})

I'm willing to send a patch if you don't mind 😄

刷新当前页面时如果滚动条位置没置顶 就会运行v-infinite-scroll 所绑定的函数

import infiniteScorll from 'vue-infinite-scroll';

[Vue warn]: Failed to resolve directive: infinite-scroll

我用的是 vue2.0

会报这个错~~到底是什么原因呢

Code needs to be refactored to support the Vue 2.0 directive structure. Directives no longer have a context.

不得不说 数据返回的内容让我耳目一新，立马给了一个star