微信小程序弹窗禁止页面滚动的实现代码
作者:任我行RQ 时间:2024-02-25 17:28:21
下面给大家介绍下小程序弹窗禁止页面滚动的效果:
在小程序弹窗时,外部页面禁止滚动
, 可以在最外部容器设置catchtouchmove
但是如果弹窗内部也需要滚动,需要用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
}
})
来源:https://blog.csdn.net/ak852369/article/details/111991661
标签:小程序,弹窗,页面滚动
0
投稿
猜你喜欢
MySql索引和事务定义到使用全面涵盖
2024-01-21 02:39:48
vue3 封装自定义组件v-model的示例
2024-06-05 10:05:23
dl,dt,dd标签 VS 传统table实现数据列表
2009-08-02 20:45:00
使用pyqt5 实现ComboBox的鼠标点击触发事件
2022-01-12 17:24:57
创建mysql表分区的方法
2024-01-16 11:48:37
pycharm无法导入lxml的解决办法
2023-08-24 04:34:39
python状态机transitions库详解
2021-07-14 15:52:16
sqlserver 通用存储过程分页代码(附使用ROW_NUMBER()和不使用ROW_NUMBER()两种情况性能分析)
2024-01-12 18:52:11
详解ABP框架中Session功能的使用方法
2024-05-13 09:16:28
详解MySQL 慢查询
2024-01-26 19:00:58
python利用socket实现客户端和服务端之间进行通信
2022-04-23 07:34:59
bootstrap-table后端分页功能完整实例
2024-04-29 13:11:44
SQL Server子查询的深入理解
2024-01-15 14:09:46
基于Python socket的端口扫描程序实例代码
2021-02-24 03:05:09
anaconda的安装和配置环境及导入pycharm的方法
2022-12-08 12:58:23
mysql 导入导出数据
2011-02-23 12:27:00
Python手动实现Hough圆变换的示例代码
2023-11-03 03:12:42
MySQL数据库中CHAR与VARCHAR之争
2011-05-05 16:33:00
详解Python模块化--模块(Modules)和包(Packages)
2023-03-30 01:14:27
python 获取文件下所有文件或目录os.walk()的实例
2021-10-13 03:31:01