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

微信小程序弹窗禁止页面滚动的实现代码

 更新时间：2020年12月30日 16:01:00   作者：任我行RQ  
这篇文章主要介绍了微信小程序弹窗禁止页面滚动的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

下面给大家介绍下小程序弹窗禁止页面滚动的效果：

在这里插入图片描述

在小程序弹窗时，外部页面禁止滚动， 可以在最外部容器设置catchtouchmove
但是如果弹窗内部也需要滚动，需要用scroll-view包裹，并设置scroll-y
catchtouchmove需要接收个方法，不然会一直警告

<view class="box">占位</view>
<view class="pop" catchtouchmove="touchMove">
 <view class="popbg"></view>
 <view class="popup">
  <scroll-view scroll-y>
   <view class="row" wx:for="{{10}}" wx:key="index">{{index}}</view>
  </scroll-view>
 </view>
</view>
.box {
 height: 120vh;
}

.popbg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.7);
}

.popup {
 position: fixed;
 top: 20%;
 left: 50%;
 transform: translate(-50%, 0);
 width: 70%;
 background: #fff;
 z-index: 1;
}

scroll-view {
 height: 500rpx;
}

.row {
 width: 100%;
 height: 200rpx;
}
Page({
 touchMove() {
  return
 }
})

到此这篇关于微信小程序弹窗禁止页面滚动的文章就介绍到这了,更多相关小程序弹窗禁止页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • uni-app返回上一个页面并进行页面刷新的方法

    uni-app返回上一个页面并进行页面刷新的方法

    这篇文章主要给大家介绍了关于uni-app返回上一个页面并进行页面刷新的相关资料,返回上一页面在uniapp有多种方法,文中给出了详细的图文示例,需要的朋友可以参考下
    2023-07-07
  • 鼠标焦点离开文本框时验证的js代码

    鼠标焦点离开文本框时验证的js代码

    本文为大家介绍下利用js来验证文本框的值，当鼠标焦点离开文本框时进行验证，示例代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
    2013-07-07
  • Code:　write(s,d) 输出连续字符串

    Code:　write(s,d) 输出连续字符串

    Code:　write(s,d) 输出连续字符串...
    2007-08-08
  • Js可拖拽放大的层拖动特效实现方法

    Js可拖拽放大的层拖动特效实现方法

    这篇文章主要介绍了Js可拖拽放大的层拖动特效实现方法,涉及javascript操作DOM元素及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript实现的像java、c#之类的sleep暂停的函数代码

    javascript实现的像java、c#之类的sleep暂停的函数代码

    我们都知道java、c#、vb等语言都有sleep暂停的函数，而JavaScript脚本没有类似的功能。
    2010-03-03
  • JavaScript详解类数组与可迭代对象的实现原理

    JavaScript详解类数组与可迭代对象的实现原理

    这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理，ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for...of循环，Map(iterable)构造器，展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化
    2022-06-06
  • JS工厂模式开发实践案例分析

    JS工厂模式开发实践案例分析

    这篇文章主要介绍了JS工厂模式开发,结合具体实践案例形式分析了基于javascript工厂模式实现的轮播功能相关操作技巧,需要的朋友可以参考下
    2019-10-10
  • js+css在交互上的应用

    js+css在交互上的应用

    关于css应用。以前一直认为css就是做布局样式，只能表现页面，跟交互是没关系的。事实上也基本不会往那边想。
    2010-07-07
  • 微信小程序实现点击返回顶层的方法

    微信小程序实现点击返回顶层的方法

    这篇文章主要为大家详细介绍了微信小程序实现点击返回顶层的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 老生常谈document.ready和window.onload

    老生常谈document.ready和window.onload

    这篇文章主要介绍了document.ready和window.onload的相关知识,包括document.ready和window.onload的区别,要使用document.ready()或者document.onload()的原因分析,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2024-01-01

最新评论