发布于2022-11-19 06:57 阅读(801) 评论(0) 点赞(0) 收藏(5)
可以使用vant组件库实现-上拉刷新、下拉加载功能
vant2开发指南:htt[ps://youzan.github.io/vant/v2/#/zh-CN/list
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<!-- 要循环的内容(组件) -->
</van-list>
将 van-list 标签包裹要循环显示 的 内容 外层
配置:loading参数 、finished参数 、onLoad方法
通过
loading - - - 控制数据的加载,false 代表没有正在刷新,true 代表正在刷新
finished - - - 控制数据是否加载完毕,true 代表数据全部加载完,false 代表数据没有加载完
onLoad方法 - - - 获取数据
loading 、finished 值在data中进行设置,下拉时,loading会由false变为 true,代表正在刷新,并且获取数据,当数据获取到后,loading 又变为 false
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished">
<!-- -->
</van-pull-refresh>
将 van-pull-refresh 标签包裹在 van-list 标签 外层
配置:refreshing参数 、onRefresh方法
数据加载完后,禁止下来加载,将 disabled属性和 finished 绑定,数据加载完后,禁用下拉加载功能- - -
:disabled=“finished”
refreshing - - - 是否正在下来刷新
onRefresh - - - 下拉刷新处理函数
<template> <div class="home-container"> <van-nav-bar title="测试代码" fixed/> <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <ArticleInfo v-for="item in artList" :key="item.art_id" :title="item.title" :author="item.aut_name" :comm_count="item.comm_count" :pubdate="item.pubdate" :cover="item.cover" ></ArticleInfo> </van-list> </van-pull-refresh> </div> </template> <script> import { getArticleListAPI } from '@/api/articleAPI.js' import ArticleInfo from '@/components/Article/ArticleInfo.vue' export default { name: 'Home', components: { ArticleInfo }, data() { return { page: 1, limit: 10, artList: [], loading: true, finished: false, refreshing: false } }, created() { this.initArticleList() }, methods: { async initArticleList(isRefresh) { const { data: res } = await getArticleListAPI(this.page, this.limit) if (isRefresh) { this.artList = [...res, ...this.artList] this.refreshing = false } else { // console.log(res) // this.artList = res this.artList = [...this.artList, ...res] this.loading = false } if (res.length === 0) { this.finished = true } }, // 上拉加载处理函数 onLoad() { this.page++ // this.loading = true this.initArticleList() }, // 下拉刷新处理函数 onRefresh() { this.page++ // this.refreshing = true this.initArticleList(true) } } } </script> <style lang="less" scoped> .home-container { padding: 46px 0 50px; .van-nav-bar { background: #007bff; } /deep/ .van-nav-bar__title { color: #fff; } } </style>
原文链接:https://blog.csdn.net/qq_39111074/article/details/123187642
作者:西门费雪
链接:http://www.qianduanheidong.com/blog/article/455506/fbdb50708859e98d1039/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!