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

創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，微信小程序，網(wǎng)頁(yè)設(shè)計(jì)制作，成都做手機(jī)網(wǎng)站，全網(wǎng)整合營(yíng)銷推廣幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。

回顧下 page的生命周期

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

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

1. onReachBottom 上拉刷新

2. onPullDownRefresh 下拉刷新

• 需要在app.json的window選項(xiàng)中或頁(yè)面配置中開啟enablePullDownRefresh。

• 可以通過(guò)wx.startPullDownRefresh觸發(fā)下拉刷新，調(diào)用后觸發(fā)下拉刷新動(dòng)畫，效果與用戶手動(dòng)下拉刷新一致。

• 當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新。

const?app?=?getApp()

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

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



????//?獲取當(dāng)前的分頁(yè)數(shù)
????var?page?=?me.data.page;
????me.getAllVideosList(page);
??},

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


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

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

????????//?判斷當(dāng)前頁(yè)page是否是第一頁(yè)，如果是第一頁(yè)，那么設(shè)置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;

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

}


})

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

本文標(biāo)題：「小程序JAVA實(shí)戰(zhàn)」小程序頁(yè)面的上拉下拉刷新（50）
當(dāng)前URL：http://chinadenli.net/article2/gshoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、自適應(yīng)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)