一、项目数据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变量中

async getList(){const getComment = await getCommentAPI({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事件

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

3、上拉触发onLoad事件

async onLoad(){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
});//获取评论
export const getCommentAPI = (params) =>request ({url:"/comment/hot",params})

comment.vue

<template><div><van-nav-bar title="评论" fixed left-arrow @click-left="$router.back()"/><div><div class="main" ><!-- 下拉刷新 --><van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功"><van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"><van-cell v-for="(c,index) in list" :key="index"><div class="wrap" ><div class="img_wrap"><img :src="c.user.avatarUrl" alt=""></div><div class="conent_wrap"><div class="header_wrap" ><div class="info_wrap"><p>{{c.user.nickname}}</p><p>{{c.time}}</p></div><div>{{c.likedCount}}点赞</div></div><div class="footer_wrap">{{c.content}}</div></div></div></van-cell></van-list></van-pull-refresh></div></div></div>
</template>
<script>
import {getCommentAPI} from "@/api";
export default {name:'Comment',data(){return {id : this.$route.query.id,commentsInfo:[], // 每次接收20个评论数据page:1, // 页码loading:false, // 下拉加载状态finished:false, // 所有数据是否加载完成状态refreshing:true, // 上拉加载状态list:[] // 所有数据}},methods: {//获取数据async getList(){const getComment = await getCommentAPI({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;},// 上拉刷新async onLoad(){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;}},// 下拉刷新async onRefresh(){this.finished = false;this.loading = true;this.onLoad();}},
}
</script><style scoped>.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>

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

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

Vue2使用vant实现_网易云音乐案例(可跟做练手项目)
文章目录知识点自测铺垫(自学) 本地接口项目部署今日学习目标 1. 案例-网易云音乐 1.0 网易云音乐-本地接口 1.1 网易云音乐-本地接口启动 1.2 网易云音乐-前端项目初始化 1.3 ...
破解网易云js加密,爬虫获取网易云评论
破解网易云js加密,爬虫获取网易云评论抓包这里是对网页版的网易云音乐进行抓包,分析网络请求,url https://music.163.com/#/song?id=36229055 然后可以发现 ...
Python爬虫——selenium爬取网易云评论并做词云
大家好!我是霖hero 到点了上号网易云,很多人喜欢到夜深人静的时候,在网易云听音乐发表评论,正所谓:自古评论出人才,千古绝句随口来,奈何本人没文化,一句卧槽行天下!评论区集结各路大神,今天我们来爬取 ...
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器实现功能每日推荐私人FM 歌单广场排行榜歌手歌曲播放 mv播放上下滑动切换云盘上传用户登录歌单创 ...
Python爬虫——教你js逆向爬取网易云评论
大家好!我是霖hero 正所谓条条道路通罗马,上次我们使用了Selenium自动化工具来爬取网易云的音乐评论,Selenium自动化工具可以驱动浏览器执行特定的动作,获得浏览器当前呈现的页面的源代码, ...
网易云评论进行LDA主题模型分析
网易云评论进行LDA主题模型分析前言这个项目是在学校参加竞赛下与另一个同学一起做的,我负责的是对评论进行LDA主题模型的分析.写这篇文章是想记录一下学习过程,有什么地方描述的不对还请大家多多指教, ...
python处理json数据——网易云评论爬取
python处理json数据--网易云评论爬取准备代码准备 1.python 3.7 2.需要安装的库: requests jsonpath pandas time fake_useragent ...
python+execjs爬取网易云评论
python+execjs爬取网易云评论分析网站 JS分析 execjs解密js 运行结果代码分析网站首先打开网易云首页,随便点一首歌曲进入到评论区. 接着按F12进入开发者工具,重新刷新页面 ...
python爬取网易云评论最多的歌_python爬取网易云音乐评论
本文实例为大家分享了python爬取网易云音乐评论的具体代码,供大家参考,具体内容如下 import requests import bs4 import json def get_hot_comme ...

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

目录