下面給大家介紹下小程序彈窗禁止頁面滾動的效果：
在小程序彈窗時，外部頁面禁止?jié)L動， 可以在最外部容器設(shè)置catchtouchmove
但是如果彈窗內(nèi)部也需要滾動，需要用scroll-view包裹，并設(shè)置scroll-y
catchtouchmove需要接收個方法，不然會一直警告
|
1
2
3
4
5
6
7
8
9
|
<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> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
.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;} |
|
1
2
3
4
5
|
Page({ touchMove() { return }}) |
到此這篇關(guān)于微信小程序彈窗禁止頁面滾動的文章就介紹到這了,更多相關(guān)小程序彈窗禁止頁面滾動內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/ak852369/article/details/111991661
