小程序页面的上拉加载和下拉加载
作者:互联网
1、需求:小程序的首页需要添加上拉加载和下拉加载的功能,之前做上拉加载和下拉加载是用的是scroll-view组件,但是感觉首页用scroll-view不是最佳选择,page自带的上拉加载和下拉加载更好用一点,就记录一下
2、解决:
上拉加载:
思路:上拉加载的原理是小程序在页面顶部撑出一块50px的空间,在一定时间后消失,所以在顶部的空间加上样式配置监听方法就好了
首先在首页json里面设置enablePullDownRefresh(还有个onReachBottomDistance属性可以设置拖动时加载区域的高度,默认50)
{ ... "enablePullDownRefresh": true, ... }
在js里面配置onPullDownRefresh方法监听用户下拉动作
// pages/home/home.ts export { } const app = getApp<IAppOption>() Page({ /** * 页面的初始数据 */ data: { hotGoodsForm: { pageNum: 1, pageSize: 10 }, hotGoodsList: [] as any, homeLoadStatus: 0 }, getHotGoodsInit(): void { this.data.hotGoodsForm.pageNum = 1 this.data.hotGoodsForm.pageSize = 10 app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => { //加载完成停止当前页面下拉刷新 wx.stopPullDownRefresh() this.setData({ hotGoodsList: res.list, homeLoadStatus: 0 }) }) }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.getHotGoodsInit() }, })
至于wxml的话,我是直接弄一个loading样式,定位在页面之前,这样下拉的时候直接显示加载中
<view class="home_swiper_loading"> <t-loading theme="spinner" size="40rpx" loading text="加载中..."></t-loading> </view>
.home_swiper_loading { width: 100%; height: 100rpx; position: absolute; display: flex; justify-content: center; align-items: center; top: -100rpx; background-color: #f5f5f5; }
下拉加载:
思路:下拉加载是滚动到页面底部会触发监听事件,所以让list把page撑开,配置加载样式组件展示状态配置方法就ok了
下拉加载第一步就是要滚动到底部,如果你用的是自定义tabber,可以设置page属性来展示完全页面
page{ height: auto; padding-bottom: calc(env(safe-area-inset-bottom) + 96rpx); }
然后在最底部加一个展示状态的组件,用于展示加载中,没有更多数据和加载失败这些状态
<load-more list-is-empty="{{!hotGoodsList.length}}" status="{{homeLoadStatus}}" bind:retry="getHotGoodsInit" />
在js里面配置onReachBottom监听页面上拉触底事件,监听到事件后,处理新的数据
// pages/home/home.ts export { } const app = getApp<IAppOption>() Page({ /** * 页面的初始数据 */ data: { hotGoodsForm: { pageNum: 1, pageSize: 10 }, hotGoodsList: [] as any, homeLoadStatus: 0 }, getHotGoodsInit(): void { this.data.hotGoodsForm.pageNum = 1 this.data.hotGoodsForm.pageSize = 10 app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => { wx.stopPullDownRefresh() this.setData({ hotGoodsList: res.list, homeLoadStatus: 0 }) }) }, getHotGoodsDowm(): void { this.setData({ "hotGoodsForm.pageNum": this.data.hotGoodsForm.pageNum + 1, homeLoadStatus: 1 }) app.ajax.post('/api/goods/getHotGoods', this.data.hotGoodsForm).then((res: any) => { if (res.list.length != 0) { this.setData({ hotGoodsList: [...this.data.hotGoodsList, ...res.list], homeLoadStatus: 0 }) } else { this.setData({ homeLoadStatus: 2 }) } }).catch(() => { this.setData({ homeLoadStatus: 3 }) }) },/** * 生命周期函数--监听页面加载 */ onl oad() { this.getBannerList() this.getHotGoodsInit() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { this.getHotGoodsInit() }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { this.getHotGoodsDowm() }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
3、效果:
标签:程序,homeLoadStatus,hotGoodsForm,加载,data,监听,页面 来源: https://www.cnblogs.com/lovewhatIlove/p/16196611.html