Vue插件—vant當中van-list的使用

先看官網  點這里

1、安裝

npm i vant -S

2、引入 在src/main.js里面引入 

import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);

3、使用  teamplate

　　//van-list  是必須帶的標簽，里面的標簽可以自己加
　　<van-list
        v-model="loading"
        :finished="finished"
        finished-text="沒有更多啦"
        @load="load_more"
        class="publist"
      >
         <li v-for="(item,ing) of list" :key="ing">{{item.name}}</li>
       
      </van-list>

script

export default {
  name: 'Home',
  data(){
    return{
      list: [],
      loading: false,//加載狀態
      finished: false,//是否加載
      page: 1,//頁數
　　　 limit: 15//條數
    }
  },
 methods:{
    load_more: function() {
      this.page += 1;//頁數+1 this.onLoad();
    },
    onLoad() {
        let data = {
        page: this.page,
        pageSize: this.limit
        }
        axios.post('api/test/xbxxf',data)
        .then(res => {
          if(res.data.code=200){   
            // 加載狀態結束
            this.loading = false;
            this.list = this.list.concat(res.data.data.list);//追加數據 if (res.data.data.page == res.data.data.pageNum || res.data.data.list.length == 0) {  //數據全部加載完成 this.finished = true;
            }else{
              this.finished = false;
            }        
          }  
        })
      }
}
}

另外注意css，因為滑動加載，看你滑動的是不是當前模塊，如果滑動的不是當前的模塊，是父元素或者其他的元素，不會觸發加載事件，也不會請求數據