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 @   帅到要去报警  阅读(492)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示