微信小程序下拉刷新获取数据和触底事件刷新实现
一、下拉刷新
1.json文件
说明：开启下拉刷新，然后设置窗口的背景色，方便观看。
"enablePullDownRefresh": true,
"backgroundColor":"#FFC0CB" 
2. js文件
说明：重新发起请求，并显示加载中
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.getData()
wx.showLoading({
title: '加载中',
})
}, 
3.js文件
说明：当数据请求成功后，收回下拉刷新框并关闭加载中。
success: ({data}) => {
// 数据加载成功,关闭下拉刷新
wx.stopPullDownRefresh()
// 成功后并关闭加载中
wx.hideLoading()
this.setData({
arrList:data.data
})
},二、触底事件刷新
2.json文件
说明：onReachBottomDistance定义了从页面底部的距离为50px，当滚动距离接近到这个值时，通常会触发一个函数或事件来加载更多内容。
"onReachBottomDistance": 50说明：当距离页面底部为50px的时候，重新发起数据请求，并添加一个显示导航条加载动画(转态遮罩)
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getData()
// 在当前页面显示导航条加载动画,是一个状态遮罩
wx.showNavigationBarLoading()
},说明：改造了getData()函数，将以前的数据和现在获取的数据进行相加。以此下拉获取更多的信息。
getData() {
wx.request({
url: '**',
method:"GET",
success: ({data:res}) => {
// 数据加载成功,关闭下拉刷新
wx.stopPullDownRefresh()
// 成功后并关闭加载中
wx.hideLoading()
wx.hideNavigationBarLoading()
let oldData=this.data.arrList
let newData=oldData.concat(res.data)
this.setData({
arrList:newData
})
}
})
},三、源码
3.1 xml文件
猫儿
3.2 js文件
// pages/refresh/refresh.js
Page({
/**
* 页面的初始数据
*/
data: {
arrList:[]
},
getData() {
wx.request({
url: '**',
method:"GET",
success: ({data:res}) => {
// 数据加载成功,关闭下拉刷新
wx.stopPullDownRefresh()
// 成功后并关闭加载中
wx.hideLoading()
//关闭导航加载
wx.hideNavigationBarLoading()
let oldData=this.data.arrList
let newData=oldData.concat(res.data)
this.setData({
arrList:newData
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getData()
wx.showLoading({
title: '加载中',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
this.getData()
//清空数据，重新获取数据(归零)
this.setData({
arrList:[]
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
this.getData()
// 在当前页面显示导航条加载动画,是一个状态遮罩
wx.showNavigationBarLoading()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})