vue滚动到底部加载

之前也做过html引用 vue的滚动到底部加载的

//ref="Box"这个别忘了加，也可以直接在方法里@@scroll="orderScroll（e）"
//高很重要！！不然进不了滚动事件！！踩过的坑
   <div class="meal-list loaddiv" style="height:500px;overflow:auto;" ref="Box" @@scroll="orderScroll">
       <div class="order-group" v-for="(item,index) in orderList">
           <div class="order-time-w">
               <img src="~/images/ordersys/icon_calender.png" class="icon" />
                            {{item.orderDate}}
                <span style="flex:1"></span>
                 <span class="pull-right" v-if="item.payState==0?true:false">剩余支付时间：<span class="djs">{{item.Min}}:{{item.Sec}}</span><span class="pay-state">待结算</span></span>
           </div>
		</div>
       <div style="margin-top:15px;text-align:center;" v-if="loadMess">
            {{loadMessage}}
       </div>
 </div>

data:{
   loadMessage: "正在加载",
   orderList: [],//订单
},
mthods:{
	//滚动加载
    orderScroll(e) {
      let that = this;
      let a = that.$refs.Box.scrollHeight
      let b = that.$refs.Box.clientHeight
      let c = that.$refs.Box.scrollTop
      //console.log('滚动条' + a)
      //console.log('可视区' + b)
      //console.log('距离顶部' + c)
      if (b + c == a) {
         if (that.loading) { return }
             that.loading = true
             console.log("到底部了")
             that.getOrders()
     } else {
         return
     }
  },
    getOrders: function () {
       let that = this;
       if (that.orderList.length >= 0) {
          for (var i = 0; i < that.orderList.length; i++) {
              clearInterval(that.orderList[i].timer);
          }
      }
       ajaxPostJson("/OrderMeal/GetOMOrderGrid", { state: that.currentState, page: that.page, rows: 3 }, function (ret) {
           var orderListLast = ret.dataList
           console.log(orderListLast)
           if (orderListLast.length >= 0 && orderListLast.length < 3) {
              if (that.page == 1) {
                  that.orderList = orderListLast;
              }
               else {
                     that.orderList = that.orderList.concat(orderListLast);
              }
           that.loadMessage = "已加载完全部"
           that.loading = true
           that.$forceUpdate();
           console.log(that.orderList)
   			} else {
               //arr.concat(arr2)
               that.orderList = that.orderList.concat(orderListLast)
               that.page++
               that.loading = false
               that.$forceUpdate();
               console.log(that.orderList)
           }
              if (that.orderList.length == 0) {
                that.loadMess = false
                that.showEmpty2 = true;
              } else {
                  that.loadMess = true
               }
      });   
  },
}