当前位置：首页 > news >正文

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

news 来源：原创 2024/5/3 6:48:08

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