小程序中下拉刷新頁(yè)面的功能怎么實(shí)現(xiàn)？下面本篇文章給大家介紹一下微信小程序界面下拉刷新實(shí)現(xiàn)方法。
有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
微信小程序中，通過(guò)下拉刷新頁(yè)面是基本操作，在當(dāng)前頁(yè)面排滿的情況下繼續(xù)下拉加載更多內(nèi)容。
小程序和網(wǎng)頁(yè)都可以實(shí)現(xiàn)這一功能，不同的是小程序界面有能實(shí)現(xiàn)下拉刷新功能的API，只需從系統(tǒng)調(diào)用即可。
通過(guò)查看微信開發(fā)文檔可知，enablePullDownRefresh 這個(gè)屬性設(shè)置為true。
就默認(rèn)開啟了下拉刷新。
enablePullDownRefresh可以寫在app.json 中 和頁(yè)面的xxx.json，兩者的區(qū)別是，app.json 是全局型的下拉刷新，而***.json 是單個(gè)頁(yè)面的下拉刷新，只能設(shè)置window相關(guān)的配置項(xiàng)，以決定本頁(yè)面的窗口表現(xiàn)，所以無(wú)需寫window這個(gè)鍵。
另一種方法是，監(jiān)聽(tīng)scroll-view,自定義下拉刷新，scroll-view里面有一個(gè)bindscrolltoupper屬性，當(dāng)滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件，所以我們可以利用這個(gè)屬性，來(lái)實(shí)現(xiàn)下拉刷新功能。
兩種方法都可以，第一種比較簡(jiǎn)單，易上手，畢竟一些邏輯系統(tǒng)已經(jīng)給你處理好了，第二種適合那種想要自定義下拉刷新樣式的小程序，我們講解電商，就用第一種，系統(tǒng)提供的就好，主要是教會(huì)大家怎么用。
1. home.json 參數(shù)配置enablePullDownRefresh: true我們哪個(gè)頁(yè)面需要下拉刷新，就在哪個(gè)頁(yè)面對(duì)應(yīng)的xxx.json文件配置上面屬性,這個(gè)屬性從字面意思也可以知道，是否允許下拉刷新，當(dāng)然，如何你不想一個(gè)個(gè)配置允許下拉刷新，你可以直接在全局變量app.json的window里面配置上面這個(gè)屬性，這樣整個(gè)項(xiàng)目都允許下拉刷新了,這個(gè)一定要加的，因?yàn)橄到y(tǒng)默認(rèn)是不具備下拉刷新功能的home.js//下拉刷新 onPullDownRefresh:function() {
wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載 //模擬加載 setTimeout(function() {
// complete wx.hideNavigationBarLoading() //完成停止加載 wx.stopPullDownRefresh() //停止下拉刷新 }
,1500);
}
,onPullDownRefresh 下拉刷新事件監(jiān)聽(tīng)，具體看一下里面的代碼，wx.showNavigationBarLoading() 與wx.hideNavigationBarLoading() 這兩句話是用來(lái)控制小菊花的顯示和隱藏，由于我們現(xiàn)在還沒(méi)有講解網(wǎng)絡(luò)請(qǐng)求，所以我就模擬了一下網(wǎng)絡(luò)加載，通過(guò)setTimeout方法，寫一個(gè)時(shí)間延遲的方法，這個(gè)方法可以模擬網(wǎng)絡(luò)加載所消耗的時(shí)間，還有就是當(dāng)網(wǎng)絡(luò)加載完成我們要停止下拉刷新wx.stopPullDownRefresh() 。
加載更多實(shí)現(xiàn)加載更多也同理有兩種方式1. 調(diào)用系統(tǒng)的API2. 監(jiān)聽(tīng)scroll-view，bindscrolltolower滑動(dòng)到底部的監(jiān)聽(tīng)處理方式和下拉刷新略有不同，不過(guò)也大同小異。
home.jsonReachBottom: function () {
console.log('
加載更多'
) setTimeout(() => {
this.setData({
isHideLoadMore:true, recommends: [ {
goodId: 7, name:'
.....'
, url: '
....'
, imageurl:'
......'
, }
, {
goodId: 10, name:'
......'
, url:'
......'
, }
, ], }
) }
, 1000) }
onReachBottom系統(tǒng)提供的觸底事件的監(jiān)聽(tīng)，和下拉刷新一樣，我們也是模擬一些數(shù)據(jù)，加了一個(gè)時(shí)間延遲的事件，isHideLoadMore，一個(gè)自定義的值，用來(lái)控制顯示和隱藏加載控件home.wxml正在加載小程序中可以實(shí)現(xiàn)下拉刷新的方法還有其他，可以模仿H5網(wǎng)頁(yè)的做法，但微信小程序因?yàn)锳PI接口的使用，在實(shí)現(xiàn)下拉刷新功能的時(shí)候就可以減輕開發(fā)人員負(fù)擔(dān)。
推薦：
《小程序開發(fā)教程》以上就是小程序中下拉刷新頁(yè)面的功能怎么實(shí)現(xiàn)？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序本文轉(zhuǎn)載于：
即速資訊，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
微信小程序怎么實(shí)現(xiàn)購(gòu)物車功能？（方法介紹）
下一篇：
如何配置小程序開發(fā)項(xiàng)目結(jié)構(gòu)？（教程）相關(guān)文章相關(guān)視頻微信小程序開發(fā)如何入門？（圖文詳解）小程序軟件用來(lái)做什么如何配置小程序業(yè)務(wù)域名如何開發(fā)一個(gè)音樂(lè)播放器小程序？小程序中下拉刷新頁(yè)面的功能怎么實(shí)現(xiàn)？認(rèn)識(shí)小程序開發(fā)工具小程序的rpx長(zhǎng)度單位詳解布局奔牛課堂小程序搜素框 [溫州做小程序]