效果

vue-pull-refresh插件

github地址：

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

在線Demo演示：

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

實(shí)現(xiàn)

安裝插件

在項(xiàng)目目錄下打開cmd，輸入：

npm install --save vue-pull-refresh

實(shí)現(xiàn)刷新

打開要實(shí)現(xiàn)下拉刷新的界面，這里是morelist.vue,更多頁面，實(shí)現(xiàn)下拉刷新歌曲列表。

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" 表示下拉時(shí)要執(zhí)行的方法

4.新建下拉時(shí)執(zhí)行的方法

methods:{// 下拉的時(shí)候觸發(fā)函數(shù)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("沒數(shù)據(jù)了") : that.offset += 12,// that.moreListData = that.moreListData.concat(res.data.song_list)that.moreListData = res.data.song_listresolve();}).catch(error => {console.log(error);})})});}}

注：

此方法是從百度音樂接口獲取音樂數(shù)據(jù)，其中offset是偏移量。默認(rèn)是0.

在mounted鉤子函數(shù)中，會首先從接口中獲取12條數(shù)據(jù)，然后將偏移量offset加12.

在刷新方法中，會重新請求接口數(shù)據(jù)，此時(shí)的便宜量參數(shù)以及加了12，所以歌曲的數(shù)據(jù)會發(fā)生改變，然后通過選擇表達(dá)式判斷偏移量是否大于接口返回?cái)?shù)據(jù)中音樂的總數(shù)量，從而進(jìn)行相應(yīng)的判斷，是則沒有更多數(shù)據(jù)偏移量不會再增加，那么再刷新也會請求相同的數(shù)據(jù)，無法再刷新。否則偏移量繼續(xù)加12，請求的數(shù)據(jù)不同，從而實(shí)現(xiàn)數(shù)據(jù)刷新。

完整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:{// 下拉的時(shí)候觸發(fā)函數(shù)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("沒數(shù)據(jù)了") : 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>

?

總結(jié)

以上是生活随笔為你收集整理的Vue使用vue-pull-refresh插件实现下拉刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。