vue-vant实现下拉刷新和上拉加载功能(tips)

一、在vue中使用vant组件库有个van-pull-refresh下拉组件，配合van-list列表组件实现页面的下拉刷新和上拉加载，原理简单，适用场景在列表页面内容展示。

• 引入组件： List 列表、PullRefresh 下拉刷新（当然在vue-cli下的main.js全局引入vant的可以直接页面调用，无需单独引入）

  import { PullRefresh , List } from 'vant'
  
  export default {
          components: {
                   PullRefresh,
                   List
      }
  }
  复制代码

• html片段引用组件：

  <template>
      <div>
          <van-pull-refresh v-model="refreshing" @refresh="onrefresh">
              <van-list
                  v-model="loading"
                  :finished="finished" // 是否已加载完成，加载完成后不再触发load事件
                  :offset="10" // 滚动条与底部距离小于offset时触发load事件
                  :immediate-check="flase" // 是否在初始化时立即执行滚动位置检查
                  finish-text="没有更多了"
                  @load="onLoad" // 滚动条与底部距离小于offset时触发onLoad()
              >
                  <div>
                      <ul v-for="(item,index) in list" :key="index">
                          <li>{{ item.content }}</li>
                      </ul>
                  </div>
              </van-list>
          </van-pull-refresh>
      </div>
  </template>
  复制代码

• 在data中定义参数需要有：

  data() {    
    return {      
       list: [], // 请求的列表      
       loading: false,      
       finished: false, // 是否已加载完成，加载完成后不再触发load事件      
       refreshing: false, // 下拉状态      
       listQuery: {        
         page: 1, // 当前页码数        
         limit: 10, // 一页显示10条      
      }    
    };  
  },
  复制代码

• javascript逻辑代码，用到了forEach()方法调用数组的每个元素，并将元素传递给回调函数。

  mounted() {    
     this.getList();  
  },  
  methods: {    
     // 上拉加载    
     onLoad() {      
       setTimeout(() => {        
           this.getlist();      
     }, 1000);    
  },   
  // 获取列表    
  getList() {      
      // 请求得到会议列表，并传参传递请求页码和单页列表数量limit      
      getList(this.listQuery).then((res) => {        
          // 如果是第一次进入页面page==1 直接赋值        
          if (this.listQuery.page === 1) {          
              this.list = res.data.data        
          } else {          
          // 如果不是则在后面追加数据,forEach()方法         
           res.data.data.forEach(item => {            
                  this.list.push(item)          
           });          
          // 追加完成后关闭loading          
              this.loading = false        
       }        
  // 当还有数据是page++        
      if (res.data.data.length > 0) {          
          this.listQuery.page++;          
          this.loading = false        
      } else {          
          // 如果没有数据加载完毕          
          this.finished = true        
      }      
    });    
  },    
  // 下拉刷新    
  onRefresh() {      
      setTimeout(() => {        
          this.listQuery.page = 1;        
          this.getList();        
          this.refreshing = false;      
       }, 1000);    
     }  
  }};
  复制代码

以上便是简单的下拉刷新和上拉加载分页，另外page++的if判定根据后端传递的参数更改，如果后端有传递页码数，当然更好比较实现且严谨。