小程序学习——下拉分页

小程序出来没几天就被程序员业内判了死刑，但是架不住腾讯的推广

最近很多朋友都问做过小程序没有，

今天花了一天时间看了下它的文档，然后做了个基础的分页，可能不是很完善，慢慢的把一些基础功能弄出来做下记录

<button bindtap="showpro">显示产品</button>
<view>{{product.Name}}</view>

<view class="content_zero" wx:if="{{picture.length==0}}" >
    <view class="tip color_888888">没有数据</view>
</view>

<scroll-view scroll-y="true" bindscrolltolower="nextpage"style="height: 200px;" lower-threshold="0px">
    <view wx:for-items="{{picture}}" style="height:50px;line-height:50px;background:#ff0000;margin:10px;"> {{item.AltAttribute}} </view>
</scroll-view>

Page({
  onLoad: function (options) {
    var that = this;
    that.showpro();
    that.pictureList(0,5);
  },
  nextpage:function(){
    if (this.data.hasnextpage){
      //显示加载中
      wx.showToast({
        title: '加载中...',
        duration: 100,
        icon: 'loading',
      });
      var newPageIndex = this.data.pageindex + 1;
      this.pictureList(newPageIndex, 5);
    }
    else{
      wx.showToast({
        title: '下面没有数据了',
        icon: 'info',
        duration: 2000
      })
    }
  },

  //图片列表 测试分页
  pictureList: function(pageindex,pagesize) {
    var that = this;
    if (pageindex >= 0 ){
      var oldpicture = this.data.picture;
    }else{
      var oldpicture = null;
    }
    console.log(oldpicture);
    wx.request({
      url: 'http://localhost:15536/api/v1/Test/GetProducts',
      data: { pageIndex: pageindex, pageSize: pagesize },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        //把已加载的数据与新数据拼接
        if (pageindex > 0 && oldpicture!=null){
          console.log("oldpicture " + oldpicture)
          var newpicture = oldpicture.concat(res.data.Data);
          console.log(">0 " + newpicture)
        }else{
          var newpicture = res.data.Data;
          console.log("=0 " + newpicture)
        }
        
        that.setData({
          hasnextpage: res.data.HasNextPage,
          pageindex:res.data.PageIndex,
          pagesize:res.data.PageSize,
          picture: newpicture
        });
      }
    });
  },

  //产品详情
  showpro: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:15536/api/v1/Test/GetProductById',
      data: { id: 1 },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
          product: res.data
        });
      }
    })
  }
})