上拉加载需求 我们首先是要监听页面触底,
onReachBottom是小程序提供的方法,
思路就是在页面触底时 请求数据 然后再push到列表的变量里
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
homeList: [], //主页页面
page: 1, //分页
TostShow: false,//loading
isHide: 'none',//已经到底了
off_on: false,//开关
},
//事件处理函
onLoad: function(option) {
let that = this;
that.data.page++
that.loadList()
},
//获取科室数据
loadList() {
let that = this
var off_on = that.data.off_on //下拉开关
if (off_on == true) {
return
}
off_on = true
that.loadingShow()
wx.request({ //非真实接口 仅供示例
url: 'https://xxx.xxx.com/app/api/xxx_xxx_app.php?type=home_list' + "&page=" + that.data.page,
header: {
'content-type': 'application/json'
},
method: 'GET',
success: function(res) {
that.loadingHide()
if (res.data.list.length > 0) { //判断有没有数据返回
var list = that.data.homeList
for (var i = 0; i < res.data.list.length; i++) {
list.push(res.data.list[i]) //有数据就push到homeList里
}
that.setData({
homeList: list,
off_on: false
})
} else { //如果没有数据
that.setData({
isHide: 'none',//显示已经到底
TostShow: true,//关闭加载loading
off_on: true //开关打开不在触发loadList方法
})
}
}
})
},
//上滑加载
onReachBottom: function() {
var that = this;
that.data.page++
that.loadList()
},
//loadingShow
loadingShow() {
var that = this
that.setData({
hidenLoad: true,
isHide: 'block',
})
},
loadingHide() {
var that = this
that.setData({
hidenLoad: true,
isHide: 'none',
})
},
})
喜欢上方小程序,需要源码的,私信小编留下邮箱。