帮忙看下van-list组件，下拉加载数据的问题

Question

使用vue脚手架新建了一个练手项目，使用vant中van-list组件做一个数据列表的功能，下拉加载更多数据。遇到一个问题就是：下面的代码会一次性将所有的数据加载进去，而不是下拉后再加载更多数据。

<template>
  <div class="hello">
    <van-list v-model="loading" :finished="finished" loading-text="加载中..." finished-text="没有更多啦" @load="load_more" class="publist">
      <li v-for="(item,ing) of list" :key="ing">{{item.title}}</li>
    </van-list>

  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'App_index',
    data() {
      return {
        list: [],
        loading: false, //加载状态
        finished: false, //是否加载
        page: 0,
        limit: 5
      }
    },
    methods: {
      load_more: function() {
        this.page += 1; //页数+1
        this.onLoad();
      },
      onLoad() {
        const that = this
        axios.get('api/addons/cms/api/arclist', {
          params: {
            apikey: 'kdsaiasl29901ldsaftd110ga**',
            channel: 1,
            page: that.page,
            pagesize: that.limit
          }
        }).then(function(res) {
          console.log(res)
          if (res.status == 200) {
            that.loading = false;
            that.list = that.list.concat(res.data.data); //追加数据
            console.log(res.data.data.length)
            if (res.data.data.length == 0) { //数据全部加载完成
              that.finished = true;
            } else {
              that.finished = false;
            }
          }
        }).catch(function(error) {
          console.log(error);
        });
      }
    },
  }
</script>

Answer 1

使用 float 布局后一直触发加载？

若 List 的内容使用了 float 布局，可以在容器上添加van-clearfix类名来清除浮动，使得 List 能正确判断元素位置

<van-list>
  <div class="van-clearfix">
    <div class="float-item" />
    <div class="float-item" />
    <div class="float-item" />
  </div>
</van-list>