Vant—下拉刷新上拉加载

最新推荐文章于 2025-06-08 13:35:17 发布

原创

最新推荐文章于 2025-06-08 13:35:17 发布 · 7.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vant #下拉刷新上拉加载

本文介绍了使用Vant组件库实现下拉刷新和上拉加载功能的四个步骤：布局设置、初始化数据、页面加载处理以及方法定义。通过这些步骤，可以实现在页面内容滚动到顶部时自动加载更多数据的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vant—下拉刷新上拉加载

第一步：布局

<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        @load="onLoad"
        :offset="offset"
      >
     <div class="content"> //自己写的内容
        <ul>
          <li v-for="(item, index) in datacontent" :key="index">
            <div class="left">
              <p class="rank" :style="{background: item.bgcolor, color: item.color}">{
  
  {item.rank}}</p>
              <p class="score">分数：<br/><span>{
  
  {item.score}}</span></p>
            </div>
            <div class="middle">
              <img v-lazy="item.pic" alt="">
            </div>
            <div class="right">
              <p class="title">{
  
  {item.title}}