微信小程序弹窗禁止页面滚动的实现代码


Posted in Javascript onDecember 30, 2020

下面给大家介绍下小程序弹窗禁止页面滚动的效果:

微信小程序弹窗禁止页面滚动的实现代码

在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置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
 }
})

到此这篇关于微信小程序弹窗禁止页面滚动的文章就介绍到这了,更多相关小程序弹窗禁止页面滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
JavaScript中reduce()的用法
May 11 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
js+html+css实现手动轮播和自动轮播
Dec 30 #Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php页面缓存方法小结
2015/01/10 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
JavaScript中的style.display属性操作
2013/03/27 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
再谈javascript原型继承
2014/11/10 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python BeautifulSoup使用方法详解
2013/11/21 Python
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
Ajax的工作原理
2015/12/04 面试题
大课间活动实施方案
2014/03/06 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
小学生优秀评语
2014/12/29 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
新员工入职感想
2015/08/07 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL