vue2.0 自定义 下拉刷新和上拉加载更多(Scroller) 组件

1.下拉刷新和上拉加载更多组件

Scroller.vue

2.页面调用

LoadMore.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!-- 加载更多 -->
<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="加载更多">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <!-- 列表 -->
    <div class="cont">
      <m-scroller :on-refresh="onRefresh" :on-infinite="onInfinite" :dataList="scrollData" :marginTop="marginTop">
        <ul>
          <li v-for="(item,index) in listdata">{{item.name}}</li>
        </ul>
      </m-scroller>
    </div>
  </div>
</template>
 
<script>
  import mScroller from '../components/Scroller'
 
  export default {
    components: {
      mScroller
    },
    data() {
      return {
        marginTop:'margin-top:40px;',
        pageStart: 0, // 开始页数
        pageEnd: 0, // 结束页数
        listdata: [], // 数据列表
        scrollData:{
          noFlag: false //暂无更多数据显示
        }
      }
    },
    mounted: function() {
      // 首次请求数据
      this.fetchData();
    },
    methods: {
      fetchData() {
        this.axios.get('/api/testData').then((response) => {
          this.listdata = response.data.data.list;
          // 获取总页数
          this.pageEnd = response.data.data.totalPage;
          // 还原
          this.pageStart = 0;
        })
      },
      // 下拉刷新
      onRefresh(done) {
        this.fetchData();
        done(); // call done
      },
      // 上拉加载更多
      onInfinite(done) {
        this.pageStart++;
        // 加载条
        let more = this.$el.querySelector('.load-more');
        // 判断是否显示加载条
        if(this.pageStart > this.pageEnd){
          //走完数据调用方法
          this.scrollData.noFlag = true;
        }else{
          let _this = this;
          this.axios.get('/api/testData').then((response) => {
            _this.listdata = _this.listdata.concat(response.data.data.list);
            // 获取总页数
            _this.pageEnd = response.data.data.totalPage;
          })
        }
        // 隐藏加载条
        more.style.display = 'none';
        done();
      }
    }
  }
</script>
 
<style lang="less" scoped>
  ul {
    li {
      min-height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid red;
    }
  }
  // 隐藏滚动条
  ::-webkit-scrollbar{
    display:none;
  }
</style>

 

3.效果图

 

posted @   每天都要进步一点点  阅读(2339)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示