<!--  -->
<!-- <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 class="pd-price">200.00 

                <p class="pd-sold">50

            </li>-->
    </ul>
  </div>
</div>
<!--  -->
<!-- <page-footer></page-footer> -->

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

/ / Public

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; iPP) {
      var pd = curPageData[i];

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

      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; iPP) {
              if (i == data.length) break;
              listData.push(data[i]);
            }
          }

          //
          successCallback(listData);
        },
        error: errorCallback
      });
    }, 2000)
  }
},
mounted() {
  //MeScroll,down,,
  //: mescroll.resetUpScroll(); resetUpScrollpage.num=1,up.callback,;
  var self = this;
  self.mescroll = new MeScroll("mescroll", { //vuemountedmescroll,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-sharpq10
      toTop: { //
        // src: "../res/img/mescroll-totop.png", //1000px,offset
        //offset : 1000
      }
    }
  });

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

},
// 
created() {
  this.getListDataFromNet()

}

}
< / script >
< style scoped >

< / style >

ask the boss to give us some advice