可以使用vant组件库实现-上拉刷新、下拉加载功能
vant2开发指南:htt[ps://youzan.github.io/vant/v2/#/zh-CN/list
上拉加载- - -List列表
<van-listv-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
注意:
获取数据的方法一般有两个参数:当前页码(page),每页显示数据条数(num),可以在data中定义这两个数据每次加载时,页码(page)+ 1获取到的数据要合并到原来的数据数组中,一起展示,可以用const newArr = […oldArr, …res] 方式组合数据,追加数据到尾部获取到数据后, 注意将 loading值 变为 false如果加载时获取到的数据为空,代表全部数据加载完成,finished 改为 true,设置为true后不再有下拉加载功能初始值loading: true,finished: false,每次获取到数据后 loading: false下拉刷新- - -PullRefresh
<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 - - - 下拉刷新处理函数
注意:
每次刷新时,页码(page)+ 1刷新时,将 refreshing 设置为 true,请求到数据后,再改为 false下拉加载请求到的新的数据追加到已展示的数据中,合并到 数组的 前面,const newArr = […res, …oldArr]综合代码示例:
<template><div class="home-container"><van-nav-bar title="测试代码" fixed/><van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="finished"><van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><ArticleInfov-for="item in artList":key="item.art_id":title="item.title":author="item.aut_name":comm_count="m_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 = resthis.artList = [...this.artList, ...res]this.loading = false}if (res.length === 0) {this.finished = true}},// 上拉加载处理函数onLoad() {this.page++// this.loading = truethis.initArticleList()},// 下拉刷新处理函数onRefresh() {this.page++// this.refreshing = truethis.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>