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,因为滑动加载,看你滑动的是不是当前模块,如果滑动的不是当前的模块,是父元素或者其他的元素,不会触发加载事件,也不会请求数据

 

posted @ 2020-05-14 16:59  西贝小小凤  阅读(4451)  评论(0编辑  收藏