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


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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
VueJS 取得 URL 参数值的方法
Jul 19 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里面的抽象类
2010/01/28 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
详解Python中namedtuple的使用
2020/04/27 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
实习单位接收函模板
2014/01/10 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
紧急通知
2015/04/17 职场文书
2015年电教工作总结
2015/05/26 职场文书
导游词之西递宏村
2019/12/10 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
vue 自定义组件添加原生事件
2022/04/21 Vue.js