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>
打完收工!