下面給大家介紹下小程序彈窗禁止頁面滾動的效果：
在小程序彈窗時，外部頁面禁止滾動， 可以在最外部容器設置catchtouchmove
但是如果彈窗內部也需要滾動，需要用scroll-view包裹，并設置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 }}) |
到此這篇關于微信小程序彈窗禁止頁面滾動的文章就介紹到這了,更多相關小程序彈窗禁止頁面滾動內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/ak852369/article/details/111991661
