微信小程序彈窗禁止頁面滾動的實現(xiàn)代碼
更新時間：2020年12月30日 16:01:00 作者：任我行RQ
這篇文章主要介紹了微信小程序彈窗禁止頁面滾動的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
下面給大家介紹下小程序彈窗禁止頁面滾動的效果：
在小程序彈窗時，外部頁面禁止?jié)L動， 可以在最外部容器設置catchtouchmove
但是如果彈窗內(nèi)部也需要滾動，需要用scroll-view包裹，并設置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
}
})
到此這篇關于微信小程序彈窗禁止頁面滾動的文章就介紹到這了,更多相關小程序彈窗禁止頁面滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法
這篇文章主要介紹了Laydate時間組件在火狐瀏覽器下有多時間輸入框時只能給第一個輸入框賦值的解決方法,需要的朋友可以參考下2016-08-08
第一次接觸神奇的Bootstrap菜單和Bootstrap導航，Bootstrap讓Web開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)硪黄狫S獲取input file絕對路徑的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
Javascript中八種遍歷方法的執(zhí)行速度深度對比
關于數(shù)組或?qū)ο蟊闅v，相信很多人都沒有深入觀察過執(zhí)行效率。這是一個曾在群里吵翻天的話題，讀懂后你將成為遍歷效率話題的大師。下面這篇文章主要介紹了Javascript中八種遍歷方法執(zhí)行速度深度對比的相關資料，需要的朋友可以參考下。2017-04-04
JavaScript統(tǒng)計字符出現(xiàn)次數(shù)
這篇文章主要為大家詳細介紹了JavaScript字符統(tǒng)計出現(xiàn)次數(shù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了EditPlus中的正則表達式 實戰(zhàn)(2)的相關資料,需要的朋友可以參考下2016-12-12
論壇轉(zhuǎn)貼工具中用到的正則表達式學習正則的好例子
論壇轉(zhuǎn)貼工具中用到的正則表達式學習正則的好例子...2007-11-11
這篇文章主要介紹了微信小程序的引導頁實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了Bootstrap實現(xiàn)的表格合并單元格,涉及bootstrap界面布局相關操作技巧,需要的朋友可以參考下2018-02-02
關于js new Date() 出現(xiàn)NaN 的分析
在一個項目中需要進行日期的格式化，后臺傳到前端是時間的整數(shù)（Date.getTime),當后臺數(shù)據(jù)返回字符串時，發(fā)現(xiàn)轉(zhuǎn)換日期時在ie下變成NaN，但是真的是這樣嗎？接下來我們慢慢分析2012-10-10