参考:
https://www.jianshu.com/p/c4abab8c1ba6
https://www.cnblogs.com/lucide/p/13686536.html
1. 安装"vue-infinite-scroll": "^2.0.2",
2. 在main.js 引入
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
3. 代码实现:
<template> <div id="app"> <div class="authorization_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <!-- 循环数据列表 --> <div class="list" v-for="(item,index) in datalist" :key="index"> <div>{{item}}</div> </div> <!-- 展示“正在加载、已无数据、加载失败” --> <div class="l-load">{{ loadTxt[loadKey] }}</div> </div> </div> </template> <script type="text/javascript"> export default{ name: 'App4', components: { }, data() { return { page: 1,//当前页 total: 0,//总数据数量 pageSize: 10,//每页几个 loadTxt: { more: "正在加载...", none: "没有更多了~", err: "加载失败~" }, loadKey: "none", datalist: [],//数据列表 loading: false, dataMax:0 }; }, mounted() { this.getWithdrawalList();//一进入页面就调用获取数据的方法 }, methods: { getWithdrawalList() { console.log("进入getWithdrawalList"); var _this = this; this.loadKey = "more";//把展示改为"正在加载..." //调用获取数据的接口,这里是用封装的axios // record({ // "pageIndex": _this.page, // "pageSize": _this.pageSize // }).then(res => { // if (res.data.code == 200) { // var info = res.data.content || null; // if (info) { // _this.total = info.count; // var data = info.list || []; // _this.datalist = _this.datalist.concat(data); // if (_this.total == _this.datalist.length) { // _this.loadKey = "none"; // } // } else { // _this.loadKey = "err"; // } // } // }); setTimeout(function(){ for(let j=_this.dataMax, len = 10; j<len+_this.dataMax;j++){ _this.datalist.push(j) } _this.dataMax+=10; _this.total = 32; if (_this.total < _this.datalist.length) {//这里我假设数据加载完了 _this.loadKey = "none"; this.loading = true } // console.log(_this.total); // _this.loadKey = "none"; },1000); }, loadMore() { console.log("进入loadMore 要在手机上才有效果"); let page = this.page; let size = this.pageSize; let total = this.total; let length = this.datalist.length; let num = page * size; if (num < total && num === length) { console.log("loadMore......1111"); ++this.page; this.getWithdrawalList(); } }, } } </script> <style media="screen"> .authorization_box { 100%; background-color: #f6f6f6; padding: 0.5rem 1rem 1rem; } .list{ 100%; height: 2.5rem; border: 1px solid #ccc; margin-bottom: 0.5rem; display: flex; justify-content: center; align-items: center; } .l-load { text-align: center; font-size: 0.625rem; color: #aaa; margin-top: 1rem; } </style>