小程式之滑動加載（懶加載）

代碼實作

​

html

<block class="order-list">
   <view class="list" wx:for="{{allData}}">
      <view>
        <image src="{{item.goods_logo}}" alt="" />
      </view>
      <view>
        <text>{{item.goods_title}}</text>
        <text>￥{{item.selling_price}}/份</text>
        <text>{{item.goods_desc}}</text>
      </view>
   </view>
</block>      

css(簡單的排版下)

.list{
  display: flex;
}

.list view:last-child{
  padding-top: 10rpx;
}
.list view image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}
.list view text{
  display: block;
}      

js

data: {
    page:1,
    length:5,
    allData:[]
},


getListData(){
    let that=this
    let page=that.data.page;
    (0, _rewx.post)("/applet/goods/getlist", { store_id: 1 ,page:that.data.page}).then(function (t) {
      console.log(t)
      that.setData({
        order_list:t.goods_list
      })
      let list = that.data.allData.concat(t.goods_list)
      if(t.goods_list.length < 1){
        that.setData({
          moreLoadingComplete: true,
          moreLoading: false
        })
      }else{
        page++;
        that.setData({
          'allData':list,
          'page':page,
          no_data:t.goods_list,
          moreLoading:true
        })
        //console.log(that.data.allData);
      }
    });
  },
  onShow: function () {
    var e = this;
    e.setData({
      page: 1,
      length: 10,
      allData:[]
    }), e.getListData();
  },
  onReachBottom: function () {
    this.getListData();
  },