微信小程序弹窗禁止页面滚动

在小程序弹窗时，外部页面禁止滚动，可以在最外部容器设置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}
})

微信小程序弹窗禁止页面滚动相关推荐

微信小程序page禁止页面上下滑动
在单页面设置disableScroll为true即可; 则页面整体不能上下滚动.只在页面配置中有效,无法在 app.json 中设置在需要的页面的json文件里添加即可: {"disab ...
微信小程序定位功能+页面滚动+列表展示
效果图地图定位代码: wxml:  <view class="shop-map"><map class="{{isS ...
微信小程序弹窗打开时，控制页面不能滚动
问题:微信小程序里,页面上有一个弹窗,弹窗里有可滚动列表,弹窗列表滚动时页面的列表也会滚动. 解决方法:在wxml页面上添加<page-meta page-style="{{ cart ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
【微信小程序】各种页面特效链接！
微信小程序:各种页面特效链接! 1.文字跑马灯效果: http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2.触摸水波涟漪效果: h ...
php自定义弹窗,微信小程序弹窗自定义的代码
这篇文章主要介绍了微信小程序弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下微信小程序弹窗首先wxml代 ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...

微信小程序弹窗禁止页面滚动

微信小程序弹窗禁止页面滚动相关推荐

最新文章

热门文章