上拉加載下拉刷新

參數和返回值

 

 核心代碼

<template>
  <div class="blogs">
    <!--用於測試：bottom-all-loaded爲false能夠上拉記載，爲true則禁用loadMore-->
    <div style="position: fixed; top:0px; z-index: 999; background-color: red">禁用上拉加載：{{!blogs.hasMore}}</div>
    <!--核心內容-->
    <div class="content">
      <loadmore :top-method="loadTop" :bottom-method="loadBot"  :bottom-all-loaded="!blogs.hasMore" :auto-fill="false" ref="loadmore">
        <!--下拉或者上拉加載中的提示語-->
        <div slot="top" class="mint-loadmore-top">
          <span class="drop" v-show="status=='loadTop'">更新中...</span>
        </div>
        <div slot="bottom" class="mint-loadmore-bottom">
          <span class="drop" v-show="status=='loadBottom'">加載中...</span>
        </div>
        <!--列表內容-->
        <div class="blogsItem" v-for="item in blogs.data" :key="item.bid" v-on:click="goDetail(item.bid)"  >
          <h3>{{item.title}}</h3>
          {{item.desc}}</br>
        </div>
      </loadmore>
      <!--最後一頁的時候，提示一下沒數據了-->
      <tips-cmp v-bind:title="'已經到最後一頁了'" ref="tips"></tips-cmp>
    </div>
    <!--底部公共導航欄-->
    <footbar-cmp v-bind:activeTips="'blogs'"></footbar-cmp>
  </div>
</template>
<script>
  import {Loadmore} from 'mint-ui';
  import footbarCmp from '@/components/footbar'
  import TipsCmp from '../common/modal/tips.vue'
  export default {
    name:'blogsCmp',
    components:{
      TipsCmp,
      footbarCmp,Loadmore},
    data() {return{
      status:'',
      blogs:{
        data:[],
        hasMore:true
      },
      fy:{
        page:1,//第一頁
        size:50//每頁顯示10條
      }
    }},
    methods: {
      loadTop:function() { //下拉刷新
        this.status='loadTop'
        this.fy.page=1;
        this.loadData();
        this.$refs.loadmore.onTopLoaded();
      },
      loadBot:function() { // 上拉加載
        this.status='loadBottom'
        this.fy.page++
        this.loadData();
        this.$refs.loadmore.onBottomLoaded();
      },
      loadData:function (){ // 加載數據
        this.service.getBlogs(this.fy).then(rep =>{
          this.blogs.hasMore=rep.data.hasMore;
          if(this.fy.page==1){
            this.blogs.data=rep.data.data
          }else{
            this.blogs.data=this.blogs.data.concat(rep.data.data)
          }

          //上拉加載，下拉刷新的loading狀態消失
          var vm=this;
          setTimeout(function () {
            vm.status='';
          },3000)

          //提示用戶不會再有數據了
          if(!this.blogs.hasMore){
            this.$refs.tips.open()
          }

        });
      },
      goDetail:function (bid) {
        this.$router.push({ name: 'BlogDetail', params: { bid: bid }})
      }
    },
    mounted(){this.loadData()}//初次訪問查詢列表
  }
</script>
<style scoped>
  .content{padding-top: 10px}
  .blogs{ background-color: darkgray; padding-bottom: 30px; }
  .blogsItem{ margin: 0px 8px; margin-bottom: 10px; padding: 10px; text-align: left; overflow: hidden; background-color: white; border-radius: 6px;  }
</style>

 

效果圖


注意事項
在pc上模擬可能會出現下拉不刷新現象，建議用手機測試

項目源碼
後端：https://github.com/dingshaohua123/myzone_node.git
前端：https://github.com/dingshaohua123/myzone_vue.git