緣由

昨天測試給我的(de)小(xiǎo)程序提了(le)一(yī)個'↑α​(gè)bug，說(shuō)：‘我怎麽滑動彈出後的(de)這(zh¶•'è)個(gè)列表後面的(de)列表也(yě)會(huì)跟著(zhe)滑動啊，這(zhè)↔¶•Ω很(hěn)奇快(kuài)诶’，我：‘我修複一(yī)下(γ≤£xià)’。

造成問(wèn)題的(de)場(chǎng)景

是(shì)一(yī)個(gè) 數(shù)據列表頁 ，通(tōng)過 觸底上(shàng)滑 加載數(shù)據

所以我把 頁面最外(wài)層 的(de) view 加了(le)一(yī)個(gè) min-height: '100vh' 讓這(zhè)個(gè)列表 可(kě)以自(zì)動增加高(gāo)度進行(xíng)擴容

這(zhè)個(gè)列表頁有(yǒu) 很(hěn)多(duō)篩選條件(jiàn)或者說(shuō)是( ™shì)篩選項 ，我做(zuò)了(le)一(yī)個(gè) 有(yǒu)背景遮罩層的(de)彈出組件(jiàn) ，把這(zhè)些(xiē) 篩選項塞進去(qù) ，最外(wài)層的(de) view 給了(le)一(yī)個(gè) max-height: 85vh; overflow: scroll； 讓它也(yě)可(kě)以在數(shù)據很(hěn)多(duō)的( >de)時(shí)候 滑動去(qù)選擇 某一(yī)個(gè)篩選項

注意問(wèn)題就(jiù)來(lái)了(le)：如(rú)果Ω←彈出的(de)篩選組件(jiàn)和(hé)數(shù)₹ε‍據列表的(de)數(shù)據都(dōu)多(duō)到(dào)超出了(le)上(shà←β≈ng)述的(de) 85vh 100vh 這(zhè)時(shí)候如(rú)果滑動彈出的(de)篩選列表 touchmove 事(shì)件(jiàn)就(jiù)會(huì)在兩個(gè)列表上•₩←∑(shàng)同時(shí)觸發，表現(xiàn)為(wèi) σ₩當上(shàng)層列表觸底或者觸頂時(shí)，如(r♥'ú)果底層列表為(wèi)觸底或者未觸頂 ，就(jiù)會(huì)觸發底層的(de) touchmove 事(shì)件(jiàn)，就(jiù)會(huì)↓>←滑動背景，也(yě)就(jiù)是(shì)老(lǎo)生(shēng)常談的(d↔<•σe) 滑動穿透 ，既然找出問(wèn)題發生(shēng)的(de)原因了(le)，現(xδ↓≤ iàn)在我們就(jiù)開(kāi)始解決吧(ba):ha↕‍‍Ωmmer:

百度大(dà)法好(hǎo)不(bù)好(hǎo)？

小(xiǎo)程序端

有(yǒu)人(rén)說(shuō)給底層列表增加一(yī)個(gè) catchtouchmove='true' ,但(dàn)這(zhè)種情況下(xià)直接頁面都(dōu)不(bù)能(n→±✘φéng)滑動了(le)，我又(yòu)看(kàn)到(dào)很(hěn)多(duō)說(sσ'₩huō)給底層的(de)列表放(fàng)到(dào) scroll-view 裡(lǐ)面然後設置 scroll-y='true' ，通(tōng)過scoll-view的(de)事(shì)件(jiàn)去(qù✘​)加載數(shù)據，但(dàn)是(shì) scroll-view 性能(néng)在列表數(shù)據特别多(duō)的(de)時(shí)候會☆¶$(huì)有(yǒu)折扣，這(zhè)個(gè)先不(bù•'↔)談，據本人(rén)嘗試，這(zhè)種方式并不(bù ∏φ♥)奏效，可(kě)能(néng)我的(de)姿勢不(b&★‌ù)對(duì)，有(yǒu)哪位仁兄有(yǒu)解決過的(de)可(kě)以來(lε¶ái)探討(tǎo)一(yī)下(xià)，歡迎留言~~ε  ©

web端

推薦直接使用(yòng) tua-body-scroll-lock ,可∏α(kě)以比較完美(měi)的(de)解決這(zhè)個(gè)↓÷¶問(wèn)題。

祭出我的(de)大(dà)殺器(qì)

其實我們改變一(yī)下(xià)思路(lù)問(wèn)題就(£πjiù)迎刃而解了(le) 首先明(míng)确我們的(de)需求： 最上(shàng)層的(de)列表滑動的(de)時(shí)候下(xià)面的(d‌ e)列表不(bù)能(néng)滑動 簡單啊： 我們是(shì)可(kě)以在底層的(d §♦ e)頁面上(shàng)監聽(tīng)到(dào)上(shàng♣✔∑)層的(de)列表有(yǒu)沒有(yǒu)顯示的(de)：當上(shàng)層列表展↕∞示的(de)時(shí)候，給到(dào)底層的(de) view 一(yī)個(gè) overflow: hidden;hight: 10×™♣0vh 的(de)樣式，當上(shàng)層隐藏的(de)時(shí)候取消這(zγ'hè)個(gè)樣式

親測完美(měi)解決 ★,° :.☆(￣▽￣)/$: .°★ 。測試小(xiǎo)姐(jiě)姐(jiě)都(dōu)說(shuō)好(hǎo)( ﹁¶€∑ ﹁ ) ~→