vue----mintui之上拉加载下拉刷新

1.注意点

   注意父级元素一定要设置高度(如果顶部底部有固定元素减去顶部底部元素的高度)  否者下拉刷新会存在问题

2.父级元素在css中加上该属性(-webkit-overflow-scrolling: touch;) 避免在IOS上存在问题

 

截图如下:

 

代码如下:

<template>
  <div>
    <div class="fixTop"></div>
    <div id="content"  v-bind:style="{'height': clientHeight-120 + 'px' }">
      <!-- <div id="content"  > -->
      <mt-loadmore
        class="loadmore"
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        :auto-fill="false"
        ref="loadmore"
      >
        <!-- 页码为1时提示信息 -->
        <!-- v-bind:style="{'min-height': clientHeight-120 + 'px' }" -->

        <div class="wrap" v-bind:style="{'min-height': clientHeight-120 + 'px' }">
          <div class="item" v-for="(data,index) in list" :key="index"  >
            <div class="name">{{index}}</div>
          </div>
          <div v-show="allLoaded">没有更多</div>
        </div>
      </mt-loadmore>
    </div>

    <div class="fixBottom"></div>
  </div>
</template>

<script>
import { list, list2 } from "../fetch/api";
import { fetch } from "../fetch/fetch";

//默认会加载一次上拉
export default {
  data() {
    return {
      list: [],
      allLoaded: false,
      pageStart: 1,
      clientHeight: 0
    };
  },
  mounted: function() {
    this.getList(); //第一次的数据

    //原生获取屏幕高度
    this.clientHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    console.log(this.clientHeight);
  },

  activated() {
    //原生获取屏幕高度
    var h = document.documentElement.clientHeight || document.body.clientHeight;
    console.log(h);
  },

  watch: {
   
  },
  methods: {
    loadTop: function() {
      console.log("下拉");
      this.pageStart = 1;
      this.allLoaded = false;     // 可以进行上拉
      this.$refs.loadmore.onTopLoaded();
      this.getList();
    },
    loadBottom: function() {
      console.log("上拉");
      this.$refs.loadmore.onBottomLoaded();
      this.pageStart++;
      this.getList();
    },

    // 商品列表
    getList: function(done) {
      var that = this;
       list2({
       type:1,
       page:that.pageStart
      }).then(function(data) {
        console.log(data.data);
        var list = data.data;
        console.log("页码" + that.pageStart);
        if (that.pageStart == 1) {
          that.concatList = [];
        } else {
          that.concatList = that.list;
        }

        if (list.length < 10) {
          console.log("加载完毕到底了");
          that.allLoaded = true;   // 禁止上拉
        }

        that.list = list.concat(that.concatList);
      })
        
    }
  }
};
</script>

<style>
#content {
  width: 100%;
  overflow: scroll;
  overflow-y: scroll;
  background: pink;
  -webkit-overflow-scrolling: touch;
  position: relative;
  top: 50px;
  /* height: 500px; */
}

.item {
  width: 100%;
  height: 100px;
  margin-bottom: 0;
  background: #ccc;
  margin-bottom: 2px;
}

.wrap {
  /* min-height: 500px; */
}
.fixTop {
  width: 100%;
  height: 50px;
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.fixBottom {
  width: 100%;
  height: 50px;
  background: red;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
</style>