效果

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-更多按钮实现下拉刷新相关推荐

Vue实现仿音乐播放器9-更多按钮实现数据匹配
前言前面已经实现热门榜单等,现在要实现更多按钮,点击更多按钮,将跳转到morelist.vue页面,在此页面会加载10条数据. 效果实现在pages下新建morelist.vue更多页面组件代 ...
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址 https://github.com/badaoliumang/vuemusicplayer Vue实现仿音乐播放器各阶段代码 https://download.csdn.net/d ...
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据,现在继续来完善home主页. 效果新歌速递 swiper实现轮播图实现实现新歌速递在components下新建新歌速递组件News_ ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
后端实体类接收数组_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
Vue实现仿音乐播放器14-实现搜索页面以及功能
效果实现百度音乐搜索API说明例:method=baidu.ting.search.catalogSug&query=海阔天空参数:query = " //搜索关键字搜索页 ...
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面, 播放界面调用百度音乐接口实现数据的获取以及音乐的播放. 效果实现配置路由首先在pages目录下新建musicp ...

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

效果

vue-pull-refresh插件

实现

安装插件

实现刷新

完整morelist.vue代码

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

最新文章

热门文章