滑到距离底部200的时候,数据加载并且展示下一页数据
Refresh.wxml文件
<!-- 刷新的小demo -->
<view class="fresh" class="fresh" wx:for="{{reFreshList}}" wx:key="id">
<!-- 图片 -->
<view class="bg_img">
<image src="{{item.images[0]}}"></image>
</view>
<!-- 文本 -->
<view class="text">
<text class="name">{{item.name}}</text>
<text class="phone">电话:{{item.phone}}</text>
<text class="address">地址:{{item.address}}</text>
<text class="time">营业时间:{{item.businessHours}}</text>
</view>
</view>
Refresh.wxss文件
/* pages/Refresh/Refresh.wxss */
.fresh{
display: flex;
flex-direction: row;
border: 1px solid #efefef;
padding-top:5px
}
/* .bg_img{
width: 50%;
} */
.bg_img image{
width: 250rpx;
height: 250rpx;
display: block;
}
.text{
display: flex;
flex-direction: column;
font-size: 12px;
padding-left: 10px;
justify-content: space-around;
}
.name{
font-weight: bold;
}
Refresh.json文件
{
"usingComponents": {},
"onReachBottomDistance": 200,
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}
Refresh.js文件
// pages/Refresh/Refresh.js
Page({
/**
* 页面的初始数据
*/
data: {
// 携带过来的标题bar的参数定义
query: {},
// 收集数据的值
reFreshList: [],
// 展示第几页
page: 1,
// 一页展示几条数据
pageSize: 10,
// 总共多少条数据
total: 0
},
getReFresh(stopCallbak) {
// 提前使用加载loading效果
wx.showLoading({
title: '数据在加载中',
})
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method: 'GET',
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (res) => {
console.log(res);
this.setData({
reFreshList: [...this.data.reFreshList, ...res.data],
total: res.header['X-Total-Count'] - 0
})
},
complete: () => {
wx.hideLoading()
// wx.stopPullDownRefresh()
stopCallbak && stopCallbak()
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 注意!!!这个options是获取到数据的那个页面拿参数,不是点击的那个页面
console.log(111)
console.log(options); //这个拿到的就是所携带的参数,但是不能全局使用,所以就在data里面先定义声明
this.setData({
query: options
})
this.getReFresh()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
// 只能在这个方法里面进行标题的渲染
wx.setNavigationBarTitle({
// 动态的生成title
title: this.data.query.title,
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
// 当下拉刷新的时候,要使数据重新重置
this.setData({
page:1,
reFreshList:[],
total:0,
})
this.getReFresh(()=>{
wx.stopPullDownRefresh()
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
// 当刷新的时候就让page+1实现分页
// 当每次距离还有两百的距离的时候就实现将page+1页
// 出现的问题,当没有数据的时候要进行最后一页的展示
if (this.data.reFreshList.length == this.data.total) {
return wx.showToast({
title: '数据加载完毕!',
icon: 'none'
})
}
this.setData({
page: this.data.page + 1
})
this.getReFresh()
},
})