vuejs+sui实现无限滚动加载

.page、.content高度是固定的，当.list-container高度可视高度小于.content高度时，加载更多内容。这个组件.content就是根节点，所以程序中 $(this.$el) 实际上就是$(’.content’)。

Vue.component('guestbook-index',{
  props:[],
  data: function(){
    return {
      inited:false,
      itemlist:[],
      lastid:0,
      loading: false,
      page:0,
      scrolling:false,
    }
  },
  mounted: function(){
    this.getlist();
  },
  
  methods:{

    getlist: function(){
      var me = this;
      me.loading = true;
      appCore.getJSON(appCore.url('getlist'), {lastid:this.lastid,t:Math.random()}, function(res){
        me.loading = false;
        me.scrolling = false;
        me.inited = true;
        if(res.code==0){
          for (var i = 0; i < res.data.length; i++) {
            me.itemlist.push(res.data[i]);
          };
          me.page++;
          me.$forceUpdate();

        }
      });
    },

    infinite: function(){

      var wH = $(window).height(); //始终固定的
      var dH = $(document).height();//始终固定的
      var elH = $(this.$el).height();
      var elT = $(this.$el).position().top;
      var cH = $(this.$el).height(); //始终固定的
      var lH = $(this.$el).find('.list-container').height();
      var cT = $(this.$el).position().top;
      var lT = $(this.$el).find('.list-container').position().top;
      var lsT = $(this.$el).find('.list-container').scrollTop();
      var cST = $(this.$el).scrollTop();

      console.log(
        this.page,
        'elH = '+elH,
        'cT = '+cT,
        'cH = '+(cH),
        'lH = '+lH,
        'lT = '+lT,        
        'lH+lT = '+(lH+lT),
      );

      if((lH+lT)<cH && this.inited==true && this.loading==false && this.scrolling==false){
        this.scrolling = true;
        console.log("============== getlist ================");
        this.getlist();
      }

    },

    onTouch: function(){
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(this.scroll);
    },


  },
  
  template:`

    <div class="content" @scroll="infinite" @touch="onTouch">
      
      <div class="list-block" >
        <ul class="list-container" >
          <li class="item-content" v-for="(v,k) in itemlist">
            <div class="item-inner">
              <div class="item-title">Item ' + i + '</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 加载提示符 -->
      <div class="infinite-scroll-preloader">
        <div class="preloader"></div>
      </div>
    </div>

  `
});