「小程序JAVA實戰」小程序頁面的上拉下拉刷新（50）

前已經完成了小程序的列表展示，但是對于上拉和下拉刷新這個功能，其實跟小程序的生命周期有關系，一起回顧下完成，上拉和下拉刷新。源碼：https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15

回顧下 page的生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

列表小程序端完成 上拉，下拉刷新功能

1. onReachBottom 上拉刷新

2. onPullDownRefresh 下拉刷新

• 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。

• 可以通過wx.startPullDownRefresh觸發下拉刷新，調用后觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。

• 當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

const?app?=?getApp()

Page({
??data:?{
????//?用于分頁的屬性
????totalPage:?1,
????page:?1,
????videoList:?[],
????screenWidth:?350,
????serverUrl:?"",
??},

??onLoad:?function?(params)?{
????var?me?=?this;
????var?screenWidth?=?wx.getSystemInfoSync().screenWidth;
????me.setData({
??????screenWidth:?screenWidth,
????});



????//?獲取當前的分頁數
????var?page?=?me.data.page;
????me.getAllVideosList(page);
??},

??getAllVideosList:function(page){
????var?me?=?this;
????var?serverUrl?=?app.serverUrl;
????wx.showLoading({
??????title:?'請等待，加載中...',
????});


????wx.request({
??????url:?serverUrl?+?'/video/showAll?page='?+?page,
??????method:?"POST",
??????success:?function?(res)?{
????????wx.hideLoading();
????????wx.hideNavigationBarLoading();
????????wx.stopPullDownRefresh();

????????console.log(res.data);

????????//?判斷當前頁page是否是第一頁，如果是第一頁，那么設置videoList為空
????????if?(page?===?1)?{
??????????me.setData({
????????????videoList:?[]
??????????});
????????}

????????var?videoList?=?res.data.data.rows;
????????var?newVideoList?=?me.data.videoList;

????????me.setData({
??????????videoList:?newVideoList.concat(videoList),
??????????page:?page,
??????????totalPage:?res.data.data.total,
??????????serverUrl:?serverUrl
????????});

??????}
????})
??},

??onPullDownRefresh:?function?(params)?{
????var?me?=?this;
????wx.showNavigationBarLoading();
????me.getAllVideosList(1);

??},

??onReachBottom:?function?(params){
????var?me?=?this;
????var?currentPage?=?me.data.page;
????var?totalPage?=?me.data.totalPage;

????//判斷當前頁數和總頁數是否相等，如果相同已經無需請求
????if?(currentPage?==?totalPage){
??????wx.showToast({
????????title:?'已經沒有視頻啦~',
????????icon:"none"
??????})
??????return;
????}
????var?page?=?currentPage+1;
????me.getAllVideosList(page);

}


})

PS：上拉刷新不需要做任何的配置，下拉刷新需要開啟配置，每次請求建議開啟 wx.showNavigationBarLoading() 和 wx.hideNavigationBarLoading(); 配合使用。