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


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函数
Apr 09 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
JS 树形递归实例代码
May 18 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
javascript模块化简单解析
Apr 07 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
详解JavaScript之Array.reduce源码解读
Nov 01 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
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php实现socket推送技术的示例
2017/12/20 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
js命名空间写法示例
2015/12/18 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
python使用pil生成图片验证码的方法
2015/05/08 Python
基于Python的接口测试框架实例
2016/11/04 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
详解python读取和输出到txt
2019/03/29 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
台湾7-ELEVEN线上购物中心:7-11
2021/01/21 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
餐厅考勤管理制度
2014/01/28 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
个人整改方案范文
2014/10/25 职场文书
2014年党建工作总结
2014/11/11 职场文书
2014公司年终工作总结
2014/12/19 职场文书
博士给导师的自荐信
2015/03/06 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
分享提高 Python 代码的可读性的技巧
2022/03/03 Python