微信小程序彈窗禁止頁面滾動的實現(xiàn)代碼
更新時間：2020年12月30日 16:01:00 作者：任我行RQ
這篇文章主要介紹了微信小程序彈窗禁止頁面滾動的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
下面給大家介紹下小程序彈窗禁止頁面滾動的效果：
在小程序彈窗時，外部頁面禁止?jié)L動， 可以在最外部容器設(shè)置catchtouchmove
但是如果彈窗內(nèi)部也需要滾動，需要用scroll-view包裹，并設(shè)置scroll-y
catchtouchmove需要接收個方法，不然會一直警告
<view class="box">占位</view>
<view class="pop" catchtouchmove="touchMove">
<view class="popbg"></view>
<view class="popup">
<scroll-view scroll-y>
<view class="row" wx:for="{{10}}" wx:key="index">{{index}}</view>
</scroll-view>
</view>
</view>
.box {
height: 120vh;
}
.popbg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.popup {
position: fixed;
top: 20%;
left: 50%;
transform: translate(-50%, 0);
width: 70%;
background: #fff;
z-index: 1;
}
scroll-view {
height: 500rpx;
}
.row {
width: 100%;
height: 200rpx;
}
Page({
touchMove() {
return
}
})
到此這篇關(guān)于微信小程序彈窗禁止頁面滾動的文章就介紹到這了,更多相關(guān)小程序彈窗禁止頁面滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于uni-app返回上一個頁面并進(jìn)行頁面刷新的相關(guān)資料,返回上一頁面在uniapp有多種方法,文中給出了詳細(xì)的圖文示例,需要的朋友可以參考下2023-07-07
本文為大家介紹下利用js來驗證文本框的值，當(dāng)鼠標(biāo)焦點離開文本框時進(jìn)行驗證，示例代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
Code: write(s,d) 輸出連續(xù)字符串...2007-08-08
這篇文章主要介紹了Js可拖拽放大的層拖動特效實現(xiàn)方法,涉及javascript操作DOM元素及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
javascript實現(xiàn)的像java、c#之類的sleep暫停的函數(shù)代碼
我們都知道java、c#、vb等語言都有sleep暫停的函數(shù)，而JavaScript腳本沒有類似的功能。2010-03-03
JavaScript詳解類數(shù)組與可迭代對象的實現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對象的實現(xiàn)原理，ES6中引入了迭代器與可迭代對象的概念，并且提供了對可迭代對象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開語法...等。讓我們對數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化2022-06-06
這篇文章主要介紹了JS工廠模式開發(fā),結(jié)合具體實踐案例形式分析了基于javascript工廠模式實現(xiàn)的輪播功能相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
關(guān)于css應(yīng)用。以前一直認(rèn)為css就是做布局樣式，只能表現(xiàn)頁面，跟交互是沒關(guān)系的。事實上也基本不會往那邊想。2010-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊返回頂層的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
老生常談document.ready和window.onload
這篇文章主要介紹了document.ready和window.onload的相關(guān)知識,包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01