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


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打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
JS跨域问题详解
Nov 25 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 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代码的50个实用技巧必备(上)
2016/01/22 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
javascript基本语法分析说明
2008/06/15 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
Python闭包思想与用法浅析
2018/12/27 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python 如何创建一个线程池
2020/07/28 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
int和Integer有什么区别
2013/05/25 面试题
产品销售员岗位职责
2013/12/18 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
校园演讲稿汇总
2014/05/21 职场文书
学习党代会心得体会
2014/09/05 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang