脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序弹出层禁止页面滚动

微信小程序实现弹出层禁止页面滚动

 更新时间：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
    })
  },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅述Javascript的外部对象

    浅述Javascript的外部对象

    本文主要对Javascript的外部对象进行介绍，列举了具体实例。便于理解。有需要的朋友可以看下
    2016-12-12
  • ECharts事件处理与旭日图实现

    ECharts事件处理与旭日图实现

    这篇文章介绍了ECharts事件处理与实现旭日图的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-06-06
  • 详解js中的原型，原型对象，原型链

    详解js中的原型，原型对象，原型链

    这篇文章主要介绍了js中的原型，原型对象，原型链的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07
  • 理解Javascript文件动态加载

    理解Javascript文件动态加载

    这篇文章主要帮助大家理解Javascript文件动态加载，解决了Javascript文件动态加载时出现的错误，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js将图片转base64的两种实现方法

    js将图片转base64的两种实现方法

    这篇文章主要给大家介绍了关于js将图片转base64的两种实现方法,Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法,需要的朋友可以参考下
    2023-07-07
  • 每天一篇javascript学习小结（基础知识）

    每天一篇javascript学习小结（基础知识）

    这篇文章主要介绍了javascript基本的知识点，包括字符串、特殊字符运算、变量转字符串等，对javascript的基础知识讲解的很全面，为了更好地帮助大家学习javascript，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript实现全选取消效果

    JavaScript实现全选取消效果

    这篇文章主要为大家详细介绍了JavaScript实现全选取消效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Js控制弹窗实现在任意分辨率下居中显示

    Js控制弹窗实现在任意分辨率下居中显示

    弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示，为了解决此问题，本文测试了一下案例在此与大家分享，有类似需求的朋友可以学习下
    2013-08-08
  • javascript读取xml

    javascript读取xml

    javascript读取xml...
    2006-11-11
  • JavaScript实现打地鼠游戏

    JavaScript实现打地鼠游戏

    这篇文章主要为大家详细介绍了JavaScript实现打地鼠游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论