效果

vue-pull-refresh插件

github地址：

https://github.com/lakb248/vue-pull-refresh

在線Demo演示：

https://lakb248.github.io/vue-pull-refresh/

實現

安裝插件

在項目目錄下打開cmd，輸入：

npm install --save vue-pull-refresh

實現刷新

打開要實現下拉刷新的界面，這里是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_listresolve();}).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_listthis.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_listresolve();}).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

?

總結

以上是生活随笔為你收集整理的Vue实现仿音乐播放器10-更多按钮实现下拉刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。