之前也做过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 } }); }, }