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

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 decode="{{true}}">作者：{{item.author}}&emsp;&emsp;&emsp;</text>

<text >类型：{{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

})

}

})

}

})

看完记得关注哦！