Vue中实现一个无限加载列表

参考?https://www.jianshu.com/p/0a3aebd63a14

一个需要判断的地方就是加载中再次触发滚动的时候，不要获取数据。

<div class="cnblogs_code">

  
  列表无限加载
  
    
    
  


  
    
      {{ item }}
      Loading......
    
  
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">src<span style="color: #0000ff;">="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="color: #0000ff;"><<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;"> fetch(from,size <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #000000;">20<span style="background-color: #f5f5f5; color: #000000;">) { <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 模拟后台获取数据

<span style="background-color: #f5f5f5; color: #000000;">      console.log(<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">获取数据 传入: <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,{ from,size });

let data <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> [];

let total <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #000000;">98<span style="background-color: #f5f5f5; color: #000000;">;

size <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> Math.min(size,total <span style="background-color: #f5f5f5; color: #000000;">-<span style="background-color: #f5f5f5; color: #000000;"> from <span style="background-color: #f5f5f5; color: #000000;">+ <span style="background-color: #f5f5f5; color: #000000;">1<span style="background-color: #f5f5f5; color: #000000;">);

<span style="background-color: #f5f5f5; color: #0000ff;">for<span style="background-color: #f5f5f5; color: #000000;"> (let i <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #000000;">0<span style="background-color: #f5f5f5; color: #000000;">; i <span style="background-color: #f5f5f5; color: #000000;"><<span style="background-color: #f5f5f5; color: #000000;"> size; i<span style="background-color: #f5f5f5; color: #000000;">++<span style="background-color: #f5f5f5; color: #000000;">) {

data.push(列表项${from </span><span style="background-color: #f5f5f5; color: #000000;"&gt;+</span><span style="background-color: #f5f5f5; color: #000000;"&gt; i});

}

let ret <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> { data,total };

<span style="background-color: #f5f5f5; color: #0000ff;">return <span style="background-color: #f5f5f5; color: #0000ff;">new<span style="background-color: #f5f5f5; color: #000000;"> Promise(<span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;"> (resolve,reject) {

setTimeout(() <span style="background-color: #f5f5f5; color: #000000;">=><span style="background-color: #f5f5f5; color: #000000;"> {

console.log(<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">获取数据 返回: <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,ret);

resolve(ret);

},<span style="background-color: #f5f5f5; color: #000000;">500<span style="background-color: #f5f5f5; color: #000000;">);

})

}

<span style="background-color: #f5f5f5; color: #0000ff;">new<span style="background-color: #f5f5f5; color: #000000;"> Vue({

el: <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">#unlimitedList<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,data: {

list: [],loading: <span style="background-color: #f5f5f5; color: #0000ff;">true<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 数据加载中

<span style="background-color: #f5f5f5; color: #000000;">        allLoaded: <span style="background-color: #f5f5f5; color: #0000ff;">false  <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 数据已经全部加载

<span style="background-color: #f5f5f5; color: #000000;">      },methods: {

getData() {

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.loading <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #0000ff;">true<span style="background-color: #f5f5f5; color: #000000;">; <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 显示加载中的标识

<span style="background-color: #f5f5f5; color: #000000;">          fetch(<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.list.length <span style="background-color: #f5f5f5; color: #000000;">+ <span style="background-color: #f5f5f5; color: #000000;">1<span style="background-color: #f5f5f5; color: #000000;">).then(res <span style="background-color: #f5f5f5; color: #000000;">=><span style="background-color: #f5f5f5; color: #000000;"> {

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.list.splice(<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.list.length,<span style="background-color: #f5f5f5; color: #000000;">0<span style="background-color: #f5f5f5; color: #000000;">,...res.data); <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 将新获取到的数据连接到 this.list (vue 能检测到 splice() 函数

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.loading <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #0000ff;">false<span style="background-color: #f5f5f5; color: #000000;">; <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 加载结束 取消加载中显示

<span style="background-color: #f5f5f5; color: #0000ff;">if<span style="background-color: #f5f5f5; color: #000000;"> (<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.list.length <span style="background-color: #f5f5f5; color: #000000;">===<span style="background-color: #f5f5f5; color: #000000;"> res.total) {

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.allLoaded <span style="background-color: #f5f5f5; color: #000000;">= <span style="background-color: #f5f5f5; color: #0000ff;">true<span style="background-color: #f5f5f5; color: #000000;">;

}

})

},onScroll(e) {

<span style="background-color: #f5f5f5; color: #0000ff;">if<span style="background-color: #f5f5f5; color: #000000;"> (<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.loading <span style="background-color: #f5f5f5; color: #000000;">|| <span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.allLoaded) <span style="background-color: #f5f5f5; color: #0000ff;">return<span style="background-color: #f5f5f5; color: #000000;">;

let top <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> document.documentElement.scrollTop <span style="background-color: #f5f5f5; color: #000000;">||<span style="background-color: #f5f5f5; color: #000000;"> document.body.scrollTop; <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 滚动条在Y轴上的滚动距离

<span style="background-color: #f5f5f5; color: #000000;">          let vh <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> document.compatMode <span style="background-color: #f5f5f5; color: #000000;">== <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">CSS1Compat<span style="background-color: #f5f5f5; color: #000000;">' <span style="background-color: #f5f5f5; color: #000000;">?<span style="background-color: #f5f5f5; color: #000000;"> document.documentElement.clientHeight : document.body.clientHeight; <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 浏览器视口的高度

<span style="background-color: #f5f5f5; color: #000000;">          let height <span style="background-color: #f5f5f5; color: #000000;">=<span style="background-color: #f5f5f5; color: #000000;"> Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 文档的总高度

<span style="background-color: #f5f5f5; color: #0000ff;">if<span style="background-color: #f5f5f5; color: #000000;"> (top <span style="background-color: #f5f5f5; color: #000000;">+<span style="background-color: #f5f5f5; color: #000000;"> vh <span style="background-color: #f5f5f5; color: #000000;">>=<span style="background-color: #f5f5f5; color: #000000;"> height) { <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 滚动到底部

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.getData(); <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 如果已经滚到底了 获取数据

<span style="background-color: #f5f5f5; color: #000000;">          }

}

},created() {

<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.getData();

window.addEventListener(<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">scroll<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.onScroll);

},destroyed () {

window.removeEventListener(<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">scroll<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #0000ff;">this<span style="background-color: #f5f5f5; color: #000000;">.onScroll);

}

})

<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>

<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!