用vue-scroller做上拉刷新，下拉加载的模板（简单明了，通用）

1.首先下插件,并在你的vue项目中引人

1   npm i vue-scroller -D
2   import VueScroller from 'vue-scroller

2.Vue.use(VueScroller )（这一步别忘啦）

3.在你需要做上拉刷新，下拉加载的地方加上<scroller></scroller>标签（附上我的代码，这个自行替换,一般都是做列表的时候加）

1   <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
2 　　 <ul>
3 　　　　<li v-for="(item,i) in arr"  :key="i">
4 　　　　</li>
5 　　 </ul>
6   </scroller>

4.接下来就是最重要的逻辑代码了

（1）在data里面我定义了4个参数（这里是做上拉刷新下拉加载需要用到的参数）

1 data() {
2             return {
3                 noDate:false,//这是一个判断是否加载的开关
4                 arr:[]，
5                 page:1,
6                 pageSize:10
7             }
8         }

　（2）methods里面定义三个方法

 1  methods:{
 2    // 获取数据
 3     getData(){
 4          var that=this;
 5          axios.get('/api/article/findArticleList',{params:{pageNum:that.page,pageSize:that.pageSize}})
 6 　　　　 .then(function(data){
 7                          if(data.data.success){
 8 　　　　　　　　  //这一步是判断你当前请求的这一页数据是不是最后一页，如果是最后一页就不能请求了（这个根据后端给的接口判断，只要能判断出就行了，如果是最后一页给that.noDate=true）
 9                                that.noDate=data.data.data.isLastPage;
10                                // 判断是下拉刷新还是上拉加载（这一步也是比较巧妙的，当然也很好理解）
11                                if(that.page==1){
12                                      that.arr=data.data.data.list;
13                              }else{
14                                       that.arr=that.arr.concat(data.data.data.list)
15                               }
16                           }
17                      })
18            }，
19         // 下拉刷新
20       refresh(){
21          this.page=1;//重置页数刷新每次页数都是第一页
22          this.noDate=false;//重置数据判断
23          setTimeout(function(){
24              this.getData();
25              this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
26          }.bind(this),1700)
27      },
28   // 上拉加载
29    infinite(done){
30        if(this.noDate){
31               this.$refs.myscroller.finishInfinite(true);//这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
32       }else{
33            setTimeout(() => {
34                  this.page++;//下拉一次页数+1
35                  this.getData();
36                  done();//进行下一次加载操作
37            }, 1500);
38      }
39    },
40 }

5.因为刚开始要有数据，最后在mounted里面调用一下this.getData();就ok了！！！

转载于:https://www.cnblogs.com/liyue666/p/9887911.html

用vue-scroller做上拉刷新，下拉加载的模板（简单明了，通用）相关推荐

XListView下拉刷新下拉加载
自定义控件XlistView实现刷新及加载 1.要想实现数据可以上拉也可以下拉效果,可以使用自定义控件XlistView, 配置网络权限+xutils包+gson包代码如下: values下修改st ...
Android——Xlistview上拉刷新下拉加载
配置网络权限+xutils包+gson包代码如下: values下修改strings添加直接粘 <?xml version="1.0" encoding="ut ...
uniapp小程序如何通过虚拟列表配合节流，完成上拉刷新下拉加载，避免页面卡顿，提升性能呢？
本文将介绍uniapp小程序中如何使用虚拟列表和节流两种技术实现上拉刷新下拉加载功能,同时避免因渲染大量数据导致的页面卡顿问题. 一.虚拟列表在uniapp小程序开发中,当我们需要渲染大量列表数据时 ...
（仿头条APP项目）6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录一.点击过的新闻列表文字变灰效果图实现思路导入ormlite数据库类依赖利用ormlite创建数据库和表创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载
为什么80%的码农都做不了架构师?>>> 随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 M ...
jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
android上拉刷新下拉加载
本文用的XlistView的上拉刷新下拉加载主Activity package org.com.cctest;import java.text.SimpleDateFormat; import ja ...
MJRefresh上拉刷新下拉加载
在ios7之前,一直在使用开源的EGO库.但是,在使用过程中发现,普遍封装得过于复杂.耦合性强,不利于集成到自己的项目中. 另外,在ios7之后,一些原有的下拉刷新,上提加载控件表现的就不是那么出色了 ...
uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...

用vue-scroller做上拉刷新，下拉加载的模板（简单明了，通用）

用vue-scroller做上拉刷新，下拉加载的模板（简单明了，通用）相关推荐

最新文章

热门文章