vant+Vue实现列表的上拉刷新 下拉加载

写写代码让你天天都有好心情！

vant官网：vant-contrib.gitee.io/vant/#/zh-C…

• 1首先项目中下载vant，并引入 此处省略

• 2在vant组件中找到# List 列表

<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,
       pagesize:1,   //每页显示多少条
       pagenum:1 ,  //当前是第几页
       total:0  //总条数
    };
  },
  methods:{
    onLoad(){}
  }
}

• 3请求列表数据及上拉加载

 mounted(){
   this.getdata()
 },
  methods:{
   async getdata(){
      let res= await axios.get('路径',{
         params:{
           pagesize,
           pagenum
         }
       })
      this.list=[...this.list,...res.data]
      this.total=res.total
      // 加载状态结束
      this.loading = false
      if(this.list.length<this.pagesize){
         this.finished = true
      }
    },
    onLoadList() {
      this.pagenum++
      this.getdata()
    },
  }

• 4 下拉重新加载--添加van-pull-refresh组件

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <van-list>....</van-list>
</van-pull-refresh>

export default{
   data(){
     return {
        isLoading:false
     }
   },
   methods:{
     onRefresh() {
      this.isLoading = false
      //当前页设置为1
      this.pagenum = 1
      //把列表数据清空
      this.list = []
      //重新渲染数据
      this.getdata()
    },
   }
}

希望对大家有帮助.....