您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序中如何使用scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
scroll-view滾動(dòng)穿透,阻止?jié)L動(dòng)
頁面彈窗阻止?jié)L動(dòng)是一種常見的問題,這里簡單介紹小程序scroll-view的一種解決方式
常用阻止?jié)L動(dòng)方式
在不使用scroll-view的彈窗中, 為position為absolute或fixed的元素設(shè)置catchtouchmove空事件就可以阻止彈窗下的頁面因事件穿透滾動(dòng)
<view catchtouchmove="doNothing"></view>
也可直接寫catchtouchmove,相當(dāng)于綁定了事件名為true的事件
問題場(chǎng)景
在小程序中,在absolute或fixed的類彈窗布局中。要顯示列表、長文本段落等可滾動(dòng)元素,必須使用scroll-view組件,無法阻止頁面本身的滾動(dòng)
解決辦法
既然無法簡單的阻止事件穿透,就在頁面可滾動(dòng)的元素本身想想辦法:
頁面滾動(dòng)元素
小程序中的簡單布局,在頁面內(nèi)容超出一屏?xí)r,滾動(dòng)的元素是page
如何讓頁面不滾動(dòng)
將page的高度設(shè)為100%,頁面最外層放一個(gè)view,打開彈窗時(shí)通過一個(gè)class增加樣式,設(shè)頁面高度100%,overflow: hidden來停止?jié)L動(dòng)
打開彈窗時(shí)設(shè)isStopBodyScroll為true,關(guān)閉時(shí)設(shè)為false
<view class="{{isStopBodyScroll ? 'scroll-lock' : ''}}"> <!-- 頁面內(nèi)容 --> </view>
.scroll-lock { height: 100%; overflow-y: hidden; }
存在的問題
這樣設(shè)置頁面會(huì)回到頂部,期待有更好的解決方式或官方對(duì)這個(gè)問題提供支持
以上是“微信小程序中如何使用scroll-view實(shí)現(xiàn)滾動(dòng)穿透和阻止?jié)L動(dòng)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。