Vant Ui van-list列表用法

最新推荐文章于 2024-07-17 15:35:12 发布

Defined°

最新推荐文章于 2024-07-17 15:35:12 发布

阅读量1.2k

点赞数

分类专栏： Vant 文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/Undeflned/article/details/121624701

版权

Vant 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中使用VantUI的List组件进行数据加载和无限滚动。通过示例代码展示了如何配置v-model、finished-text、@load等属性，并结合axios进行API接口请求，动态加载数据并判断数据结束状态。

摘要由CSDN通过智能技术生成

Vant Ui van-list列表用法

HTML代码

 <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        :title="item.news_title"
      />
    </van-list>
  </div>

JS代码

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
    };
  },
  methods: {
    onLoad() {
      this.pageNum++
      axios({
        url: "真实接口地址",
        data: {page:this.pageNum},		//根据接口所需的页码参数传
      }).then((res) => {
        if (res.data.rows.length == 0) {		//获取到数据后判断数组长度是否等于0
          this.finished = true;				//如果数组长度为0，代表后续无数据，使finished=true
        } else {					//如果有参数，则遍历数组添加至list
          res.data.rows.forEach((item) => {
            this.list.push(item);
          });
        }
        this.loading = false;		//本次加载完毕，使loading=false
      });
    },
  },
};