怎么在vue中使用mescroll+ajax实现上拉加载下拉刷新?

ywqs
  • 31

怎么使用mescroll+ajax实现上拉加载下拉刷新,mescroll官网给的例子一点都不详细,
我试着把官网给的例子粘贴到vue中,但是一直都报错。
<template>
<div>

<!-- 头部 -->
<!-- <page-header></page-header> -->
<!-- 内容 -->
<div class="container">
  <div id="mescroll" class="mescroll">
    <!--模拟的内容-->
    <!-- <img src="img/beibei1.jpg"/>
        <img src="img/beibei2.jpg"/> -->
    <!--展示上拉加载的数据列表-->
    <ul id="dataList" class="data-list">
      <!--<li>
                <img class="pd-img" src="../res/img/pd1.jpg"/>
                <p class="pd-name">商品标题商品标题商品标题商品标题商品标题商品</p>
                <p class="pd-price">200.00 元</p>
                <p class="pd-sold">已售50件</p>
            </li>-->
    </ul>
  </div>
</div>
<!-- 底部 -->
<!-- <page-footer></page-footer> -->

</div>
</template>
<script>
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

// 公用

export default {

name: 'signin',
// 混入
//   mixins: [share],
data() {
  return {
    msg: 'signin',
    user: {}
  }
},
methods: {
  downCallback() {
    //加载轮播数据..
    //...
    //加载列表数据
    this.getListDataFromNet(0, 1, function (data) {
      //联网成功的回调,隐藏下拉刷新的状态
      mescroll.endSuccess();
      //设置列表数据
      setListData(data, false);
    }, function () {
      //联网失败的回调,隐藏下拉刷新的状态
      mescroll.endErr();
    });
  },
  upCallback(page) {
    //联网加载数据
    this.getListDataFromNet(page.num, page.size, function (curPageData) {
      //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
      //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
      console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length);

      //方法一(推荐): 后台接口有返回列表的总页数 totalPage
      //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

      //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
      //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

      //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
      //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

      //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
      mescroll.endSuccess(curPageData.length);

      //设置列表数据
      setListData(curPageData, true);
    }, function () {
      //联网失败的回调,隐藏上拉加载的状态
      mescroll.endErr();
    });
  },
  setListData(curPageData, isAppend) {
    var listDom = document.getElementById("dataList");
    for (var i = 0; i < curPageData.length; i++) {
      var pd = curPageData[i];

      var str = '<img class="pd-img" src="' + pd.pdImg + '"/>';
      str += '<p class="pd-name">' + pd.pdName + '</p>';
      str += '<p class="pd-price">' + pd.pdPrice + ' 元</p>';
      str += '<p class="pd-sold">已售' + pd.pdSold + '件</p>';

      var liDom = document.createElement("li");
      liDom.innerHTML = str;

      if (isAppend) {
        listDom.appendChild(liDom); //加在列表的后面,上拉加载
      } else {
        listDom.insertBefore(liDom, listDom.firstChild); //加在列表的前面,下拉刷新
      }
    }
  },
  getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
    //延时一秒,模拟联网
    setTimeout(function () {
      $.ajax({
        type: 'GET',
        url: '../../static/js/students.json',
        //                        url: '../res/pdlist1.json?num='+pageNum+'&size='+pageSize,
        dataType: 'json',
        success: function (data) {
          var listData = [];

          if (pageNum == 0) {
            //此处模拟下拉刷新返回的数据
            var i = Math.floor(Math.random() * data.length); //随机取一个商品返回
            data[i].pdName = "【新增商品】 商品标题";
            listData.push(data[i]);

          } else {
            //此处模拟上拉加载返回的数据 (模拟分页数据)
            for (var i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
              if (i == data.length) break;
              listData.push(data[i]);
            }
          }

          //回调
          successCallback(listData);
        },
        error: errorCallback
      });
    }, 2000)
  }
},
mounted() {
  //创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
  //解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
  var self = this;
  self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
    down: {
      auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
      callback: this.downCallback //下拉刷新的回调
    },
    up: {
      auto: true, //初始化完毕,是否自动触发上拉加载的回调
      isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉;
      callback: this.upCallback, //上拉加载的回调
      isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
      toTop: { //配置回到顶部按钮
        // src: "../res/img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
        //offset : 1000
      }
    }
  });

  this.downCallback()
  // this.downCallback()

},
// 组件创建
created() {
  this.getListDataFromNet()

}

}
</script>
<style scoped>

</style>

clipboard.png
请大佬给指点指点

回复
阅读 4k
4 个回答

你把初始化的那段代码放到nextTick函数中试下,其次你并没有定义mescroll这个变量,你这个不报错就见鬼了。你mescroll前面应该加this

楼上的你试了吗。你是在mounted的时候将mescroll挂在了VM上,但是你调用的时候没有使用this,你又不是箭头函数,所以this也不会指向VM,所以你要先缓存this,再使用。

clipboard.png

peach
  • 2
新手上路,请多包涵

successCallback报错换成这个回调方式看看 successCallback&&successCallback(listData);

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏