今天做小程序,需要做上拉加载更多内容的功能,如下图
用到了onReachBottom方法,具体实现代码如下
Page({
//初始化数据
data: {
list_all: [],
},
onReachBottom:function(){
//上拉加载
wx.showLoading({
title: '正在加载',
})
var that = this
//加载次数加一
this.setData({
page:this.data.page+1
})
//从接口获取数据
wx.request({
url: 'https://test.wensite.com/getMore',
data: {
page: that.data.page,
},
method: 'GET',
header: {
'content-type': 'application/json;application/x-www-form-urlencoded;charset=utf-8' // 默认值
},
success: function (res) {
if (res.data.list_all != undefined) {
//组合获取的数据
for (var i = 0; i < res.data.list_all.length; i++) {
that.data.list_all.push(res.data.list_all[i])
}
//往前台传递数据
that.setData({
list_all: that.data.list_all
})
} else if (res.data.list_all == undefined) {
wx.showLoading({
title: '加载完毕',
})
}
}
})
setTimeout(function () {
wx.hideLoading()
}, 1000)
}
})
下拉加载数据如下
前台页面如下
<view class='item_wrap'>
<block wx:for="{{list_all}}" wx:key="{{list_all}}">
<view class='item_lis' bindtap='opendetails' data-wzid="{{item.wzid}}" >
<image class='item_lis_img' src='{{item.url}}'></image>
<view class='info_wrap'>
<view class='item_lis_bt'>{{item.bt}}</view>
<view class='info_lis'>格式:{{item.format}}</view>
<view class='info_lis'>大小:{{item.size}}</view>
<view class='info_lis'>下载:{{item.downl}}</view>
<view class='info_lis'>{{item.time}}</view>
</view>
</view>
</block>
</view>
更多内容请查看原文 地址:https://www.codelovers.cn/article/20180823135641.html