微信小程序开发 上拉加载数据

wxml

<view class="show" wx:for="{{ array }}" wx:key="unq">

    <image src="{{ item.image }}" class="image"></image>

    <text class="title">{{ item.name }}\n\n</text>

    <text style="font-size: 13px;" decode="{{true}}">作者：{{item.author}}&emsp;&emsp;&emsp;</text>

    <text style="font-size:13px;">类型：{{item.type}}</text>

  </view>

  <view>

    <text>数据加载中...</text>

  </view>

 

wxss

 

.show{

  height: 111px;

  border-top: 1px solid #f1f1f1;

  border-bottom: 1px solid #f1f1f1;

}

.image{

  width: 100px;

  height: 100px;

  border-radius: 40%;

  margin: 5px;

  float: left;

  margin-right: 10px;

}

.title{

  font-size: 15px;

  font-weight: 100;

}

 

js

 

Page({

data: {

    page: 0,

    array: [],

}

onLoad: function () {

    wx.request({

      url: 'http://www.tpone.com/index.php/day16/index/one',

      method: 'GET',

      success: (res)=>{

        this.setData({

          array: res.data.data

        })

      }

    })

  },

 /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

    var page=this.data.page+5;

    var _this = this;

    wx.request({

      url: 'http://www.tpone.com/index.php/day16/index/one?a='+page,

      method: 'GET',

      success: (res)=>{

        var old = _this.data.array;

        var newdata = res.data.data;

        var newsdata = old.concat(newdata);

        _this.setData({

          array: newsdata,

          page: page

        })

      }

    })

  }

})

看完记得关注哦！