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