Vue2：使用Vant UI实现网易云评论页上拉和下拉刷新

目录

一、项目数据API接口地址

API地址：https://neteasecloudmusicapi.js.org/#/
API文档说明地址：https://binaryify.github.io/NeteaseCloudMusicApi/#/
写项目时,歌曲评论api不能用，使用的是热门评论

接口地址 : /comment/music

二、实现页面效果

功能：页面每次发送ajax请求获取20条数据，下拉刷新页面，上拉一次数据多增加20条

三、实现思路

Vant UI List列表基本用法：List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

1、

在路由跳转时携带ID参数发送ajax请求，根据id我们可以获取到歌曲的评论

2、

下拉触发onRefresh事件

3、

上拉触发onLoad事件

核心：

每次刷新完数据之后，一定要将loading的值改为false

四、实现思路代码

1、发送ajax请求获取20条评论

每次ajax请求获得的20条评论使用commentsInfo变量接收，然后再追加到list变量中

asyncgetList(){const getComment =awaitgetCommentAPI({id:this.id,type:0,limit:20,offset:(this.page -1)*20});this.commentsInfo = getComment.data.hotComments;this.commentsInfo.forEach(obj=>this.list.push(obj))},

2、下拉触发onRefresh事件

asynconRefresh(){this.finished =false;this.loading =true;this.onLoad();}

3、上拉触发onLoad事件

asynconLoad(){if(this.loading){this.getList();this.page++;this.refreshing =false;}if(this.list.length %20!=0){this.loading =false;this.finished =true;}},

五、实现功能完整代码

api/index.js

import axios from"axios";// axios.create()创建一个axios对象const request = axios.create({//基础路径，发请求的时候，路径当中会出现api，不用你手写baseURL:'http://localhost:3000',//请求时间超过5秒timeout:5000});//获取评论exportconstgetCommentAPI=(params)=>request({url:"/comment/hot",params})

comment.vue

<template><div><van-nav-bartitle="评论"fixedleft-arrow@click-left="$router.back()"/><div><divclass="main"><!-- 下拉刷新 --><van-pull-refreshv-model="refreshing"@refresh="onRefresh"success-text="刷新成功"><van-listv-model="loading":finished="finished"finished-text="没有更多了"@load="onLoad"><van-cellv-for="(c,index) in list":key="index"><divclass="wrap"><divclass="img_wrap"><img:src="c.user.avatarUrl"alt=""></div><divclass="conent_wrap"><divclass="header_wrap"><divclass="info_wrap"><p>{{c.user.nickname}}</p><p>{{c.time}}</p></div><div>{{c.likedCount}}点赞</div></div><divclass="footer_wrap">
                                        {{c.content}}
                                    </div></div></div></van-cell></van-list></van-pull-refresh></div></div></div></template><script>import{getCommentAPI}from"@/api";exportdefault{name:'Comment',data(){return{id:this.$route.query.id,commentsInfo:[],// 每次接收20个评论数据page:1,// 页码loading:false,// 下拉加载状态finished:false,// 所有数据是否加载完成状态refreshing:true,// 上拉加载状态list:[]// 所有数据}},methods:{//获取数据asyncgetList(){const getComment =awaitgetCommentAPI({id:this.id,type:0,limit:20,offset:(this.page -1)*20});this.commentsInfo = getComment.data.hotComments;this.commentsInfo.forEach(obj=>this.list.push(obj))this.loading =false;},// 上拉刷新asynconLoad(){
            console.log(this.list.length)if(this.loading){this.getList();this.page++;this.refreshing =false;}if(this.list.length %20!=0){this.loading =false;this.finished =true;}},// 下拉刷新asynconRefresh(){this.finished =false;this.loading =true;this.onLoad();}},}</script><stylescoped>.main{padding-top: 46px;}.wrap{display: flex;}.img_wrap{width: 0.8rem;height: 0.8rem;margin-right: 0.266667rem;}.img_wrap img{width: 100%;height: 100%;border-radius: 50%;}.conent_wrap{flex: 1;}.header_wrap{display: flex;}.info_wrap{flex: 1;}.info_wrap p:first-child{font-size: 0.373333rem;color: #666;}.info_wrap p:last-of-type{font-size: 0.24rem;color: #999;}.header_wrap div:last-of-type{color: #999;font-size: 0.293333rem;}.footer_wrap{font-size: 0.4rem;color: #333;}</style>

喜欢可以点赞收藏哦~~~~~~，早点睡，禁止内卷