vant---vantui上拉刷新下拉加载

在用vantui做移动端列表数据渲染的时候,经常会使用到下拉刷新和上来加载。

其实在 vant ui 里面,它已经为我们提供了对应的组件,我们只需要去使用即可,具体代码示例:

<van-pull-refresh v-model="tableList.refreshing" @refresh="refreshs">
  <van-list v-model="tableList.isLoading" :finished="tableList.finished" :error.sync="tableList.error" error-text="请求失败,点击重新加载" finished-text="没有更多了" @load="getList">       
    <div class="item" v-for="(item,key) in tableList.tableData" :key="key" @click="handleReadOne(item)">
      <div class="item-title">{{ item.description }}</div>
      <div class="item-dot" v-if="!item.status"></div>
      <div class="item-bot">
        <div class="bot-left">{{ item.title }}</div>
        <div class="bot-right">{{ item.createdTimeText }}</div>
      </div>
    </div>
  </van-list>
</van-pull-refresh>

打完收工!

 

posted @ 2024-05-13 14:54  帅到要去报警  阅读(28)  评论(0编辑  收藏  举报