vue 使用 mescroll.js 上拉加载例子

html

<!-- id可以改,而"mescroll"的class不能删 -->
<div id="mescroll" class="mescroll">
  <!-- //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)内容... -->
  <div>

    <div class="contentText" v-for="(item,index) in content" :key="index">
      <div class="title">{{item.title}}</div>
      <div class="divline"></div>
      <div class="paragraph">{{item.content}}</div>
      <div class="time">{{item.createTime}}</div>
    </div>

  </div>
</div>

js

var app = new Vue({
  el: '#main',
  data() {
    return {
      pageNum: 1,
      //加载库的实例 一定要在这定义 否则调用 mescroll 里的方法会提示未定义
      mescroll: null, 
      resData: [], //每次数据请求获取到的数据 
      content: [] // 展示的数据 循环展示的数据
    }
  },
  methods: {
    acquire: function (params) {
      //获取内容
      var that = this
      //自写的 ajax 公用请求方法
      $http.communique(params, function (res) {
        temp = res;
        console.log("获取公告数据upCallback", temp);

        if (temp.length != 0) {
          that.resData = temp;
          if (that.pageNum == 1) {
            that.content = [];
            console.log(that.mescroll, "第一页");
          }
          if (that.resData) {
            //合并数组
            that.content = that.content.concat(that.resData);
          }
          console.log("获取到的数据总条数", that.content.length);
          that.mescroll.endSuccess(that.content.length);

        } else {
          that.mescroll.endSuccess(0);
          console.log("没有数据了");
        }
      }, function (err) {
        that.mescroll.endSuccess(0);
        console.log("错误");
      });
    },
    upCallback: function (page) {
      var that = this;
      that.pageNum = page.num
      that.acquire(that.pageNum);
    }
  },
  mounted: function () {

    var that = this
    that.mescroll = new MeScroll("mescroll", {
      //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
      //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
      //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
      // down: {
      //    callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      // },
      up: {
        callback: that.upCallback, //上拉加载的回调
        noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        isBounce: false,
        // empty: {
        //  //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
        //  warpId: "xxid", //父布局的id (1.3.5版本支持传入dom元素)
        //  icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
        //  tip: "暂无相关数据~" //提示
        // }
      }
    });

  }
})