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

最新推荐文章于 2024-08-01 18:32:42 发布

weixin_34040079

最新推荐文章于 2024-08-01 18:32:42 发布

阅读量237

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liyue666/p/9887911.html

版权

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 }