Vue2：使用Vant UI实现网易云评论页上拉和下拉刷新 |
您所在的位置：网站首页 › vant下拉加载 › Vue2：使用Vant UI实现网易云评论页上拉和下拉刷新 |
Vue2：使用Vant UI实现网易云评论页上拉和下拉刷新
|
目录
一、项目数据API接口地址二、实现页面效果三、实现思路四、实现思路代码1、发送ajax请求获取20条评论2、下拉触发onRefresh事件3、上拉触发onLoad事件
五、实现功能完整代码
一、项目数据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 {{c.user.nickname}} {{c.time}} {{c.likedCount}}点赞 {{c.content}} 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(); } }, } .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; }喜欢可以点赞收藏哦~~~~~~，早点睡，禁止内卷 |
【本文地址】
今日新闻 |
推荐新闻 |