緣由

昨天測試給我的(de)小程序提了(le／liǎo)一個(gè)bug，說(shuō)：‘我怎麽滑動彈出(chū)後的(de)這(zhè)個(gè)列表後面的(de)列表也(yě)會跟着滑動啊，這(zhè)很奇快诶’，我：‘我修複一下’。

造成問題的(de)場景

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

所以(yǐ)我把 頁面最外層 的(de) view 加了(le／liǎo)一個(gè) min-height: '100vh' 讓這(zhè)個(gè)列表 可以(yǐ)自動增加高度進行擴容

這(zhè)個(gè)列表頁有 很多篩選條件或者說(shuō)是(shì)篩選項 ，我做了(le／liǎo)一個(gè) 有背景遮罩層的(de)彈出(chū)組件 ，把這(zhè)些 篩選項塞進去 ，最外層的(de) view 給了(le／liǎo)一個(gè) max-height: 85vh; overflow: scroll； 讓它也(yě)可以(yǐ)在(zài)數據很多的(de)時(shí)候 滑動去選擇 某一個(gè)篩選項

注意問題就(jiù)來(lái)了(le／liǎo)：如果彈出(chū)的(de)篩選組件和(hé / huò)數據列表的(de)數據都多到(dào)超出(chū)了(le／liǎo)上(shàng)述的(de) 85vh 100vh 這(zhè)時(shí)候如果滑動彈出(chū)的(de)篩選列表 touchmove 事件就(jiù)會在(zài)兩個(gè)列表上(shàng)同時(shí)觸發，表現爲(wéi / wèi) 當上(shàng)層列表觸底或者觸頂時(shí)，如果底層列表爲(wéi / wèi)觸底或者未觸頂 ，就(jiù)會觸發底層的(de) touchmove 事件，就(jiù)會滑動背景，也(yě)就(jiù)是(shì)老生常談的(de) 滑動穿透 ，既然找出(chū)問題發生的(de)原因了(le／liǎo)，現在(zài)我們就(jiù)開始解決吧:hammer:

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

小程序端

有人(rén)說(shuō)給底層列表增加一個(gè) catchtouchmove='true' ,但這(zhè)種情況下直接頁面都不(bù)能滑動了(le／liǎo)，我又看到(dào)很多說(shuō)給底層的(de)列表放到(dào) scroll-view 裏面然後設置 scroll-y='true' ，通過scoll-view的(de)事件去加載數據，但是(shì) scroll-view 性能在(zài)列表數據特别多的(de)時(shí)候會有折扣，這(zhè)個(gè)先不(bù)談，據本人(rén)嘗試，這(zhè)種方式并不(bù)奏效，可能我的(de)姿勢不(bù)對，有哪位仁兄有解決過的(de)可以(yǐ)來(lái)探讨一下，歡迎留言~~

web端

推薦直接使用 tua-body-scroll-lock ,可以(yǐ)比較完美的(de)解決這(zhè)個(gè)問題。

祭出(chū)我的(de)大(dà)殺器

其實我們改變一下思路問題就(jiù)迎刃而(ér)解了(le／liǎo) 首先明确我們的(de)需求： 最上(shàng)層的(de)列表滑動的(de)時(shí)候下面的(de)列表不(bù)能滑動 簡單啊： 我們是(shì)可以(yǐ)在(zài)底層的(de)頁面上(shàng)監聽到(dào)上(shàng)層的(de)列表有沒有顯示的(de)：當上(shàng)層列表展示的(de)時(shí)候，給到(dào)底層的(de) view 一個(gè) overflow: hidden;hight: 100vh 的(de)樣式，當上(shàng)層隐藏的(de)時(shí)候取消這(zhè)個(gè)樣式

親測完美解決 ★,° :.☆(￣▽￣)/$: .°★ 。測試小姐姐都說(shuō)好( ﹁ ﹁ ) ~→