緣由

昨天測(cè)試給我的小程序提了一個(gè)bug，說(shuō)：‘我怎么滑動(dòng)彈出后的這個(gè)列表后面的列表也會(huì)跟著滑動(dòng)啊，這很奇快誒’，我：‘我修復(fù)一下’。

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

是一個(gè) 數(shù)據(jù)列表頁(yè) ，通過(guò) 觸底上滑 加載數(shù)據(jù)

所以我把 頁(yè)面最外層 的 view 加了一個(gè) min-height: '100vh' 讓這個(gè)列表 可以自動(dòng)增加高度進(jìn)行擴(kuò)容

這個(gè)列表頁(yè)有 很多篩選條件或者說(shuō)是篩選項(xiàng) ，我做了一個(gè) 有背景遮罩層的彈出組件 ，把這些 篩選項(xiàng)塞進(jìn)去 ，最外層的 view 給了一個(gè) max-height: 85vh; overflow: scroll； 讓它也可以在數(shù)據(jù)很多的時(shí)候 滑動(dòng)去選擇 某一個(gè)篩選項(xiàng)

注意問(wèn)題就來(lái)了：如果彈出的篩選組件和數(shù)據(jù)列表的數(shù)據(jù)都多到超出了上述的 85vh 100vh 這時(shí)候如果滑動(dòng)彈出的篩選列表 touchmove 事件就會(huì)在兩個(gè)列表上同時(shí)觸發(fā)，表現(xiàn)為 當(dāng)上層列表觸底或者觸頂時(shí)，如果底層列表為觸底或者未觸頂 ，就會(huì)觸發(fā)底層的 touchmove 事件，就會(huì)滑動(dòng)背景，也就是老生常談的 滑動(dòng)穿透 ，既然找出問(wèn)題發(fā)生的原因了，現(xiàn)在我們就開(kāi)始解決吧:hammer:

百度大法好不好？

小程序端

有人說(shuō)給底層列表增加一個(gè) catchtouchmove='true' ,但這種情況下直接頁(yè)面都不能滑動(dòng)了，我又看到很多說(shuō)給底層的列表放到 scroll-view 里面然后設(shè)置 scroll-y='true' ，通過(guò)scoll-view的事件去加載數(shù)據(jù)，但是 scroll-view 性能在列表數(shù)據(jù)特別多的時(shí)候會(huì)有折扣，這個(gè)先不談，據(jù)本人嘗試，這種方式并不奏效，可能我的姿勢(shì)不對(duì)，有哪位仁兄有解決過(guò)的可以來(lái)探討一下，歡迎留言~~

web端

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

祭出我的大殺器

其實(shí)我們改變一下思路問(wèn)題就迎刃而解了 首先明確我們的需求： 最上層的列表滑動(dòng)的時(shí)候下面的列表不能滑動(dòng) 簡(jiǎn)單啊： 我們是可以在底層的頁(yè)面上監(jiān)聽(tīng)到上層的列表有沒(méi)有顯示的：當(dāng)上層列表展示的時(shí)候，給到底層的 view 一個(gè) overflow: hidden;hight: 100vh 的樣式，當(dāng)上層隱藏的時(shí)候取消這個(gè)樣式

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