vue上拉加载

方式一、Js

一、思路

1、监听屏幕的高度变化，一旦滑动到达屏幕底部就去后台请求新的数据

2、新数据的请求通过当前页数控制，每请求一次将当前页数加一，并将新的数据合并到之前的数组

3、添加防抖控制，保证不会连续同时请求数据，以及页数和数据的连贯不重复

二、实现

1、监听高度

如果是在app中，IOS需要增加手机顶部状态栏的高度

// 监听到底
handleScroll () {
  function getDocumentTop() {
    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    if (document.body) {
        bodyScrollTop = document.body.scrollTop;
    }
    if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
  }
  function getWindowHeight() {
    var windowHeight = 0;
    if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight;
    } else {
        windowHeight = document.body.clientHeight;
    }
    return windowHeight;
  }
  function getScrollHeight() {
    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    if (document.body) {
        bodyScrollHeight = document.body.scrollHeight;
    }
    if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight;
    }
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
  }
  // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // let windowHeitht = document.documentElement.clientHeight || document.body.clientHeight;
  // let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;    
  let scrollTop = getDocumentTop()
  let windowHeitht = getWindowHeight()
  let scrollHeight = getScrollHeight()
  let h;
  let terminal = getRequest('terminal');
  if (terminal == 'IOS') {
    h = scrollTop + windowHeitht + this.barHeight 
  }else {
    h = scrollTop + windowHeitht
  }
  let d = Math.abs(h - scrollHeight)   
  console.log('d',d)         
  //是否滚动到底部的判断
  if(Math.floor(d) == 0){ 
    
  }
}

调用监听

mounted () {        
  //监听如果页面发生滚动时
  window.addEventListener('scroll',this.handleScroll,true);
}, 

2、请求数据的接口

getPages () {
  // 计算总页数
  this.totalPages = Math.ceil(this.total / this.pageSize);                       
},
getApiData () {
  // 锁死，防止重复
  this.lock = true      
  const params = {
    type: this.quadrant,          
    currentPage: this.pageNum,
    pageSize: this.pageSize
  }
  api.getData(params).then(res=>{        
    if (res.code == 0) {                                 
      if (res.data.length != 0) {
        if (this.pageNum == 1) {
          this.dataList = res.data || []
        }else {
          this.dataList = this.dataList.concat(res.data)
        }                     
      } 
      this.pageNum += 1
      this.total = res.total
      this.getPages()
      // 开锁
      this.lock = false
    }               
  })
  .catch(()=>{
    
  })
},

在监听中，如果页面滚动到底就调取新的数据,并添加防止重复请求数据

//是否滚动到底部的判断
if(Math.floor(d) == 0){ 
  // 如果关闭，防止继续请求
  if (this.lock) {
    return false
  }      
  if(this.pageNum <= this.totalPages){                  
    this.getApiData();
  }else{
    return;
  }
}

3、其他事项

3-1>data中的数据

quadrant: 'A', 
dataList:[],  
pageNum: 1,
pageSize: 10, 
total:1,
totalPages:1,
lock: false,

3-2>初次调用及tab切换

初次调用

props: {
  sortTab: {
    type: Array, 
    default:_ => []                       
  },
},
watch: {
  sortTab:{
    immediate:1,
    deep:1,
    handler (n) {
      if(n.length){
        this.quadrant = this.sortTab[0]           
        this.getApiData()
      }
    }
  }
},

tab切换

handleTab (index) {
  this.quadrant = this.sortTab[index]      
  this.pageNum = 1
  this.dataList = []
  this.getApiData()
}, 

方式二、插件

1>h5-vant

1、引入

import { List } from 'vant'

export default {
  components: {
    [List.name]: List
  },
}

2、使用

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      currentPage: 0,
      pageSize: 10,
    };
  },
  methods: {
    onLoad() {
      this.loading = true
      this.currentPage++
      const params = {
        page : this.currentPage,
        limit: this.pageSize,                       
      }
      api.getData(params).then(res=>{        
        if (res.code == 0) {                                 
          if (res.data) {            
            this.list = this.list.concat(res.data)
          }
          if (!res.data || res.data.length < this.pageSize) {
            this.loading = false
            this.finished = true
          }
          this.$nextTick(() => {
            this.loading = false
          })
        }else {
          this.loading = false
          this.finished = true
        }                
      })
      .catch(()=>{
        this.loading = false
        this.finished = true
      })
    },
  },
};

3、tab切换

假如有tab切换

tabActives (item,type) {   
    this[type] = item

    this.list = []
    this.currentPage = 0
    this.finished = false    
    this.onLoad()
},

2>element-ui

v-infinite-scroll指令

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>