微信小程序顯示加載彈窗(showLoading)的過程中攔截屏幕滑動事件


        這篇文章對於熟悉小程序開發的人或者說熟悉開發文檔的人來說簡直就是雞肋,因為沒有技術性可言。不過,對於像我這種入門者而且沒有多看文檔的人來說,多少會有些用,思考再三還是寫篇文章記錄下好了,沒有惡意刷存在感[笑哭.gif]。
        場景是這樣的:我的頁面中有多條數據需要分頁顯示,所以就在頁面回調方法onReachBottom中處理"上拉加載更多"的邏輯,加載過程中使用wx.showLoading來給用戶提示,加載完成以后自動隱藏彈窗,也就是wx.hideLoading。測試中發現,在向服務器請求新數據的過程中,加載彈窗(showLoading)還在顯示的時候,用戶可以任意的滑動頁面,導致在onReachBottom方法里通過給表示頁碼的字段page加1的方式來請求下一頁數據的邏輯混亂。舉個例子,當我第一次上拉頁面去加載第二頁數據時,由於網絡請求會有些延遲,所以會在成功前一直顯示加載彈窗,如圖1.
圖1.
這個時候,我不斷來回上拉<-->下拉頁面,就會不斷的觸發onReachBottom方法,導致上述的page字段不斷的加1,而此時第二頁還沒請求到呢,但page字段的值可能就已經是3,4,5...了,所以,當第二頁數據請求到以后,再去上拉頁面打算加載第三頁的時候,其實是請求了第四,第五......頁的數據。這個問題發現以后我首先想的是像android觸摸事件那樣在這個加載過程中攔截滑動事件造成阻塞,然后就在網上搜索攔截的方法,但找了半天沒找到,在.wxml中有一些攔截事件,但我這是在js文件中的邏輯...然后嘗試添加flag的方式,也就是設置個變量flag,請求的過程中使flag=false,如果遇到false就不讓onReachBottom方法里的邏輯觸發,請求成功以后修改flag的值為true。這種方式一定程度上可行,但還是有些同步的問題導致不嚴謹。后來請教了其他人,原來只需要一個簡單配置就搞定:在wx.showLoading()的對象中將字段mask的值設為true就行了[捂臉.png],見圖2.

圖2.
然后又去看了下官方文檔,見到如下說法(圖3):
圖3.

也就是說,如果要防止在彈出加載彈窗的時候背后的頁面響應觸摸事件,那么就把mask設置為true就行了,默認是false。

注意:在開發工具的模擬器上測試是不行的,需要在真機上測試才能看到效果。

教訓就是,以后要多看看官方文檔[笑哭.gif]。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com