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


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 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
jquery form 加载数据示例
Apr 21 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
详谈js模块化规范
2017/07/07 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python插入数据到列表的方法
2015/04/30 Python
Python中的index()方法使用教程
2015/05/18 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
开业主持词
2014/03/21 职场文书
《荷花》教学反思
2014/04/16 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
2015年车间管理工作总结
2015/07/23 职场文书