小程序中下拉刷新頁面的功能如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)

小編給大家分享一下小程序中下拉刷新頁面的功能如何實(shí)現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，先為德令哈等服務(wù)建站，德令哈等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為德令哈企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

微信小程序中，通過下拉刷新頁面是基本操作，在當(dāng)前頁面排滿的情況下繼續(xù)下拉加載更多內(nèi)容。小程序和網(wǎng)頁都可以實(shí)現(xiàn)這一功能，不同的是小程序界面有能實(shí)現(xiàn)下拉刷新功能的API，只需從系統(tǒng)調(diào)用即可。

通過查看微信開發(fā)文檔可知，enablePullDownRefresh 這個(gè)屬性設(shè)置為true。就默認(rèn)開啟了下拉刷新。enablePullDownRefresh可以寫在app.json 中和頁面的xxx.json，兩者的區(qū)別是，app.json 是全局型的下拉刷新，而***.json 是單個(gè)頁面的下拉刷新，只能設(shè)置window相關(guān)的配置項(xiàng)，以決定本頁面的窗口表現(xiàn)，所以無需寫window這個(gè)鍵。另一種方法是，監(jiān)聽scroll-view,自定義下拉刷新，scroll-view里面有一個(gè)bindscrolltoupper屬性，當(dāng)滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件，所以我們可以利用這個(gè)屬性，來實(shí)現(xiàn)下拉刷新功能。

兩種方法都可以，第一種比較簡(jiǎn)單，易上手，畢竟一些邏輯系統(tǒng)已經(jīng)給你處理好了，第二種適合那種想要自定義下拉刷新樣式的小程序，我們講解電商，就用第一種，系統(tǒng)提供的就好，主要是教會(huì)大家怎么用。

1. home.json 參數(shù)配置

enablePullDownRefresh: true

我們哪個(gè)頁面需要下拉刷新，就在哪個(gè)頁面對(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)聽，具體看一下里面的代碼，wx.showNavigationBarLoading() 與wx.hideNavigationBarLoading() 這兩句話是用來控制小菊花的顯示和隱藏，由于我們現(xiàn)在還沒有講解網(wǎng)絡(luò)請(qǐng)求，所以我就模擬了一下網(wǎng)絡(luò)加載，通過setTimeout方法，寫一個(gè)時(shí)間延遲的方法，這個(gè)方法可以模擬網(wǎng)絡(luò)加載所消耗的時(shí)間，還有就是當(dāng)網(wǎng)絡(luò)加載完成我們要停止下拉刷新wx.stopPullDownRefresh() 。

加載更多

實(shí)現(xiàn)加載更多也同理有兩種方式

1. 調(diào)用系統(tǒng)的API

2. 監(jiān)聽scroll-view，bindscrolltolower滑動(dòng)到底部的監(jiān)聽

處理方式和下拉刷新略有不同，不過也大同小異。

home.js

onReachBottom: function () {
console.log(\'加載更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

onReachBottom系統(tǒng)提供的觸底事件的監(jiān)聽，和下拉刷新一樣，我們也是模擬一些數(shù)據(jù)，加了一個(gè)時(shí)間延遲的事件，isHideLoadMore，一個(gè)自定義的值，用來控制顯示和隱藏加載控件

home.wxml

正在加載

小程序中可以實(shí)現(xiàn)下拉刷新的方法還有其他，可以模仿H5網(wǎng)頁的做法，但微信小程序因?yàn)锳PI接口的使用，在實(shí)現(xiàn)下拉刷新功能的時(shí)候就可以減輕開發(fā)人員負(fù)擔(dān)。

以上是“小程序中下拉刷新頁面的功能如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：小程序中下拉刷新頁面的功能如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)
地址分享：http://muchs.cn/article42/hioec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、微信公眾號(hào)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)

聲明：本網(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í)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容