列表上拉加载更多如何实现得更优雅？

使用场景：JavaScript + vue2 + uniapp

最近Code Review我以前写的代码的时候，发现我的处理上拉加载的代码是这样的

 <script>
   export default {
     data() {
       return {
         page: 1,
         list: [],
         loadStatus:'more'
       }
     },
     methods:{
       getDataList() {
         if (this.loadStatus !== 'noMore') {
           // 发送请求
           getList({
             page:this.page,
             size:10
           }).then(res => {
             this.list = this.list.concat(res.data);
             if (res.data.length >= 10) {
               this.page++
             } else {
               this.loadStatus = 'noMore'
             }
           })
         }
       }
     }
   }
 </script>

定义了一个莫名其妙的变量loadStatus来控制是否需要继续加载，代码也不够简洁。并且由于实际的使用场景需要处理其他的事务，最后代码混乱得不堪入目，移动代码的时候更是相当的让人抓狂。

后面慢慢摸索，发现了以下两种更简洁直观的方法

方案一

 <script>
   export default {
     data() {
       return {
         page: 1,
         list: []
       }
     },
     methods:{
       getDataList() {
         if (this.page < 1) return;
         // 发送请求
         getList({
           page: this.page,
           size: 10
         }).then(res => {
           this.list = [...this.list, ...res.data];
           this.page = this.list.length === this.page * 10 ? this.page + 1 : 0
         })
       }
     }
   }
 </script> 

• 使用page来控制加载状态，如果等于0则不再继续发送请求
• 使用解构来合并数组，个人感觉比concat方法更加直观和简洁
• 如果正好加载了一整页（10条），那么可以知道`this.list.length === this.page * 10是相等的，那么this.page + 1用于下一次加载。否则的话使其为0，下一次上拉不再发送请求。

方案二

 <script>
   export default {
     data() {
       return {
         list: []
       }
     },
     methods:{
       getDataList() {
         // 发送请求
         getList({
           page: Math.ceil(this.list.length / 10) + 1,
           size: 10
         }).then(res => {
           this.list = [...this.list, ...res.data];
         })
       }
     }
   }
 </script> 

• 不控制加载状态，也就是说每次上拉都会发送请求
• 令请求中的page等于Math.ceil(this.list.length / 10) + 1，就是当前数据数组的长度除以10后向上取整再加上1。这正好是我们需要加载的下一页，假如现在的数据有72条，那么请求的就是第9页的数据。当然返回的数据是一个空数组，因为我们在请求第8页数据的时候，接口已经把最后的两条返回给我们了，再往后请求已经没有数据了。

总结

以上只是我个人的一些想法，接受批评也欢迎大家踊跃提出自己的观点。