微信小程序实现弹出层禁止页面滚动
更新时间：2022年07月07日 07:42:37 作者：换日线°
这篇文章主要为大家详细介绍了微信小程序实现弹出层禁止页面滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现弹出层禁止页面滚动的具体代码，供大家参考，具体内容如下
效果图
是否随页面滚动 catchtouchmove true开启 return关闭
.wxml
<button bindtap="switch">上下滑动({{catchtouchmove?'开':'关'}})</button>
<button bindtap="modal">弹出层</button>
<view bindtap="modal" class="modal" wx:if="{{modalName}}" catchtouchmove="{{catchtouchmove?true:return}}">
<view></view>
</view>.wxss
page{
height: 160vh;
}
.modal{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.modal>view{
width: 70%;
height: 500rpx;
background-color: #fff;
}.js
Page({
data: {
catchtouchmove:false,
modalName:false,
},
switch(){
this.setData({
catchtouchmove:!this.data.catchtouchmove
})
},
modal(){
this.setData({
modalName:!this.data.modalName
})
},
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
一文带你搞懂JS中导入模块import和require的区别
JavaScript中，模块是一种可重用的代码块，它将一些代码打包成一个单独的单元，并且可以在其他代码中进行导入和使用。JavaScript中有两种常用的方式：使用import和require，本文主要聊聊他们二者的区别2023-03-03
这篇文章主要介绍了php，js，css字符串截取的办法，其实没有什么技术含量，就是记录一下，方便自己复习巩固，希望对大家能有所帮助2014-09-09
这篇文章主要为大家详细介绍了小程序实现带索引的城市列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了js实现获取div坐标的方法,通过调用jQuery插件实现获取div元素坐标的功能,非常简单实用,需要的朋友可以参考下2015-11-11
这篇文章介绍了JS在Canvas元素内绘制钟表的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
本篇文章主要是对Ajax提交与传统表单提交的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
DOM与事件是JavaScript最核心的组成部分之一，他们赋予了页面无限的想象空间，你根本无法离开他们，否则js将寸步难行。本文给大家分享我对javascript dom事件的了解，对javascript dom事件相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了JS设计模式之策略模式概念与用法,简单分析了策略模式的基本概念、原理并结合实例形式分析了javascript实现与使用策略模式的相关操作技巧,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了js+canvas绘制五角星的方法,涉及JavaScript调用canvas组件结合数学运算绘制图形的相关技巧,需要的朋友可以参考下2016-01-01
下面小编就为大家带来一篇js中字符型和数值型数字的互相转化方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论