Vue实现仿音乐播放器10-更多按钮实现下拉刷新

缺乏、安全感 2023-10-18 12:38 35阅读 0赞

## 效果 ##

![20181213213619529.gif][]![Image 1][]

## vue-pull-refresh插件 ##

github地址：

[https://github.com/lakb248/vue-pull-refresh][https_github.com_lakb248_vue-pull-refresh]

在线Demo演示：

[https://lakb248.github.io/vue-pull-refresh/][https_lakb248.github.io_vue-pull-refresh]

![Image 1][]![20181213213636767.gif][]

## 实现 ##

### 安装插件 ###

在项目目录下打开cmd，输入：

npm install --save vue-pull-refresh

![Image 1][]![20181213213656240.jpg][]

### 实现刷新 ###

打开要实现下拉刷新的界面，这里是morelist.vue,更多页面，实现下拉刷新歌曲列表。

1.首先在页面引入插件

import VuePullRefresh from 'vue-pull-refresh';

2.然后声明插件

components:{
        VuePullRefresh
      },

3.将要下拉的页面代码用<VuePullRefresh>嵌套

<VuePullRefresh :on-refresh="onRefresh">
              <div class="info url log" v-for="(item,index) in moreListData" :key="index">
                  <div class="poster">
                      <img :src="item.pic_big" :alt="item.title">
                  </div>
                  <div class="text-wrap">
                      <div class="title">{
       { item.title }}</div>
                      <div class="author">{
       { item.artist_name }}</div>
                  </div>
              </div>
      </VuePullRefresh>

其中:on-refresh="onRefresh" 表示下拉时要执行的方法

4.新建下拉时执行的方法

methods:{
        // 下拉的时候触发函数
        onRefresh: function() {
            var that = this;
            const moreListUrl = this.HOST +"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+ this.$route.params.musictype+"&size=12&offset="+this.offset;
            return new Promise(function (resolve, reject) {
              setTimeout(() => {
                that.$axios.get(moreListUrl)
                  .then(res => {
                    console.log(res.data);
                    that.offset >= res.data.billboard.billboard_songnum - 12 ? console.log("没数据了") : that.offset += 12,
                    // that.moreListData = that.moreListData.concat(res.data.song_list)
                    that.moreListData = res.data.song_list
                    resolve();
                  })
                  .catch(error => {
                    console.log(error);
                  })
              })
            });
        }
      }

注：

此方法是从百度音乐接口获取音乐数据，其中offset是偏移量。默认是0.

在mounted钩子函数中，会首先从接口中获取12条数据，然后将偏移量offset加12.

在刷新方法中，会重新请求接口数据，此时的便宜量参数以及加了12，所以歌曲的数据会发生改变，然后通过选择表达式判断偏移量是否大于接口返回数据中音乐的总数量，从而进行相应的判断，是则没有更多数据偏移量不会再增加，那么再刷新也会请求相同的数据，无法再刷新。否则偏移量继续加12，请求的数据不同，从而实现数据刷新。

## 完整morelist.vue代码 ##

<template lang="html">
      <div class="more-list">
          <div class="wrapper">
            <h3>{
       { this.$route.params.title }}</h3>
            <VuePullRefresh :on-refresh="onRefresh">
              <div class="info url log" v-for="(item,index) in moreListData" :key="index">
                  <div class="poster">
                      <img :src="item.pic_big" :alt="item.title">
                  </div>
                  <div class="text-wrap">
                      <div class="title">{
       { item.title }}</div>
                      <div class="author">{
       { item.artist_name }}</div>
                  </div>
              </div>
            </VuePullRefresh>
          </div>
        </div>
    </template>
    
    <script>
    
    
    import VuePullRefresh from 'vue-pull-refresh';
    
    export default {
      name:"morelist",
      data(){
        return{
          moreListData:[],
          offset:0
        }
      },
      components:{
        VuePullRefresh
      },
      mounted(){
        const moreListUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.$route.params.musictype +"&size=12&offset=0"
        this.$axios.get(moreListUrl)
          .then(res => {
            this.moreListData = res.data.song_list
            this.offset = this.offset+12
          })
          .catch(error => {
            console.log(error);
          })
      },
      methods:{
        // 下拉的时候触发函数
        onRefresh: function() {
            var that = this;
            const moreListUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.$route.params.musictype +"&size=12&offset="+this.offset;
            return new Promise(function (resolve, reject) {
              setTimeout(() => {
                that.$axios.get(moreListUrl)
                  .then(res => {
                    console.log(res.data);
                    that.offset >= res.data.billboard.billboard_songnum - 12 ? console.log("没数据了") : that.offset += 12,
                    // that.moreListData = that.moreListData.concat(res.data.song_list)
                    that.moreListData = res.data.song_list
                    resolve();
                  })
                  .catch(error => {
                    console.log(error);
                  })
              })
            });
        }
      }
    }
    </script>
    
    <style scoped>
    
    .wrapper {
        padding-top: 13px;
        text-align: center;
        margin-bottom: 10px;
        background: #fff;
        clear: both;
        overflow: hidden;
    }
    
    h3{
      font-size: 22px;
      text-align: left;
      margin-left: 17px;
      margin-bottom: 5px;
    }
    
    .wrapper .info {
        width: 42%;
        float: left;
        text-align: center;
        padding-left: 17px;
        display: block;
        text-align: left;
        margin-bottom: 10px;
        position: relative;
    }
    
    </style>

此部分代码对应分阶段代码中阶段七

分阶段代码下载位置：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10846557][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[20181213213619529.gif]: https://img-blog.csdnimg.cn/20181213213619529.gif
[Image 1]: 
[https_github.com_lakb248_vue-pull-refresh]: https://github.com/lakb248/vue-pull-refresh
[https_lakb248.github.io_vue-pull-refresh]: https://lakb248.github.io/vue-pull-refresh/
[20181213213636767.gif]: https://img-blog.csdnimg.cn/20181213213636767.gif
[20181213213656240.jpg]: https://img-blog.csdnimg.cn/20181213213656240.jpg
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557