效果

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>

Vue使用vue-pull-refresh插件实现下拉刷新相关推荐

vue开发（三）vue-scroller实现下拉刷新，上拉加载笔记（包括吸顶效果失效的问题）
项目中要实现下拉刷新,上拉加载,首先想到了vue-scroller. npm网址:vue-scroller 简单记录一下自己的使用过程,以备不时之需. 安装依赖: npm install vue-sc ...
uniapp 自定义上拉加载下拉刷新组件
介绍该组件是结合uview框架写的,主要结合了里面的u-loadmore组件,可配置下拉刷新加载圈的颜色及背景色,暂无数据时的图等,突出的特点就是通过设置组件的高度,适配刘海屏iPhone,且支持嵌 ...
android多个下拉控件,Android实现支持所有View的通用的下拉刷新控件
下拉刷新对于一个app来说是必不可少的一个功能,在早期大多数使用的是chrisbanes的PullToRefresh,或是修改自该框架的其他库.而到现在已经有了更多的选择,github上还是有很多体验 ...
下拉刷新、上拉获取更多、左右滑动的ListView
这是根据网上的一篇文章整理的,不记得网址了 import java.text.SimpleDateFormat; import java.util.Date; import com.vsstoo.v ...
开源RefreshListView下拉刷新效果
1.AnimationDrawable java.lang.Object ↳ android.graphics.drawable.Drawable ↳ android.graphics ...
js 实现上拉加载和下拉刷新
目录一.js 实现上拉加载二.js 实现下拉刷新三.注意事项一.js 实现上拉加载实现上拉加载的原理:监听滚动条滑到页面底部,然后就去做一次请求数据. window.onscroll = f ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
vue项目中vue-scroller实现上拉加载和下拉刷新
vue目前是众所周知的流行框架大家都知道的,vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0).然后它的第三方插件也有很多,比如:vue-scro ...
Vue实现仿音乐播放器10-更多按钮实现下拉刷新
效果 vue-pull-refresh插件 github地址: https://github.com/lakb248/vue-pull-refresh 在线Demo演示: https://lakb24 ...

Vue使用vue-pull-refresh插件实现下拉刷新

效果

vue-pull-refresh插件

实现

安装插件

实现刷新

完整morelist.vue代码

Vue使用vue-pull-refresh插件实现下拉刷新相关推荐

最新文章

热门文章