小程序显示弹窗时禁止下层的内容滚动实现方法


Posted in Javascript onMarch 20, 2019

小程序显示弹窗时禁止下层的内容滚动实现方法,具体如下

①  第一种方式

利用position:fixed.  禁止页面滚动.

一. 页面结构html 

<view class="indexPage {{proInfoWindow?'indexFixed':''}}">
  -----------此处为整个页面的结构内容
  <button catchTap="_proInfoWindowShow">点击显示弹窗</button>
</view>
// 当proInfoWindow为true的时候显示弹窗
<view wx:if="{{proInfoWindow}}">此处为弹窗内容</view>

二. CSS部分

//添加一个类名, 把弹窗的下层内容定位为fixed.实现禁止滚动的效果
.indexFixed{
 position: fixed;
 top:0;//top:0可不写,否则显示弹窗的同时会使底层滚动到顶部.
 left:0;
 bottom:0;
 right:0;
}

三. JS部分

Page({
 data: { 
  proInfoWindow:false,//控制弹窗是否显示
   
 },
  // 点击弹窗事件, 设置proInfoWindow为true, 显示弹窗.
  // 设置proInfoWindow为true的同时, 给页面添加了一个class名为indexFixed的类.显示弹窗时下层就禁止滚动,关掉弹窗时就可以滚动.
 _proInfoWindowShow(){
   this.setData({
    proInfoWindow:true
  })
 }
})

②第二种方式

用 catchtouchmove="return"

//此处为弹窗内容
<view catchtouchmove="return"> //外层加 catchtouchmove="return"仅触摸背景区域时不穿透底部.
  <view catchtouchmove="return"></view> //在每个小的区域内加 catchtouchmove="return"
  <view> // 有需要滚动的列表区域位置不要加 catchtouchmove="return", 否则列表无法滚动
    <view>滚动列表1</view>
    <view>滚动列表2</view>
    <view>滚动列表3</view>
    <view>滚动列表4</view>
  </view>
</view>

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
面向对象的javascript(笔记)
Oct 06 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
使用变量动态设置js的属性名
Oct 19 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 #Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 #Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 #Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 #Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 #Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 #Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 #Javascript
You might like
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Python做简单的字符串匹配详解
2017/03/21 Python
理解python中生成器用法
2017/12/20 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python中常用的内置方法
2019/01/28 Python
Python递归函数实例讲解
2019/02/27 Python
用python写测试数据文件过程解析
2019/09/25 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python如何实现的二分查找算法
2020/05/27 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
偷看我的初中毕业鉴定
2014/01/29 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书