个人记录02-vue中简单的上拉加载下拉刷新

借用vant组件库：https://vant-contrib.gitee.io/vant/#/zh-CN/list

这里需要用到两个关键字  当前页面  _page和  每页加载的条数 _limit

//下拉刷新
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          //上拉加载
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
               @load="onLoad" 
               :immediate-check="flag" 
            >
                     //列表内容部分
              <my-list :list=goodslist></my-list>

              </van-list>
 </van-pull-refresh>    



<script>
export default {
    data(){
        return {
            total:19,
            loading:false,   //上拉加载
            page:1,      //页码
             refreshing: false ,//下拉刷新
            finished:false,   //上拉加载完毕
            flag:false,
             isLoading: false,
     
            goodslist:[],
        }
    },
    
     created(){           //首先页面加载一部分列表完毕
        goodsList.goodsList({
             _page:this.page,       //这里的_page和_limit是很重要的两个关键字
             _limit:8,
         }).then(res=>{
            this.goodslist=res.data;
         })
     },

    methods:{
      //下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      goodsList
        .goodsList({
          _page: 1,
          _limit: 8,
        })
        .then((res) => {
          //console.log(res.data);
          this.goodslist = res.data;
          // this.total=res.data.length

          this.finished = false;

          this.refreshing = false;
          console.log(this.page);
          this.page = 1;
        });
    },

    //上拉加载
    onLoad() {
      // console.log(this.refreshing);
      this.page++;
      goodsList
        .goodsList({
          _page: this.page,
          _limit: 8,
        })
        .then((res) => {
          // console.log(res.data);
          this.goodslist = [...this.goodslist, ...res.data];
          this.loading = false;
          console.log(this.goodslist.length);
          if (this.goodslist.length >= this.total) {
            this.finished = true;
          }
        });
    },
    }
</script>