小程序弹窗禁止背景滑动

小程序弹窗出现背景禁止滑动效果

wxml部分

<view class="mask" catchtouchmove="stopEvent" wx:if="{{modal}}"><view class="modal-content">我是弹窗内容</view></view>

js部分

  // 阻止滚动stopEvent: function () {console.log(111);return;},

wxss部分

.mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, .5);
}.modal-content {display: flex;width: 200rpx;height: 200rpx;justify-content: center;align-items: center;background: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

只贴了核心代码
另外在模拟器上是无效的去真机上才有效

小程序弹窗禁止背景滑动相关推荐

移动端下弹框禁止背景滑动
移动端下弹框禁止背景滑动茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{height ...
小程序禁用ios 左右滑动_如何在使用应用程序时禁用iOS控制中心
小程序禁用ios 左右滑动 The Control Center has proven to be a thoughtful and welcome addition to iOS, but it c ...
小程序 onReachBottom 事件快速滑动时不触发的bug
一般在列表页面会先加载一定数量的数据触发上拉加载这个动作的时候再陆续加载数据假如上拉一次加载10条数据在小程序中你快速滑动页面触发加载这个事件的话你会发现小程序卡着不动了刚开始以为数据加 ...
微信小程序全屏背景图
微信小程序全屏背景图,解决你在设置过程中出现的多次背景图重复出现的问题 wxml <view class="container" style="height: {{ ...
小程序自制自带滑动条的表格组件
小程序自制自带滑动条的表格组件在编写过程中遇到的难点 1. 表格的编写 2. 表格内容宽度固定长度自适应 3. 滚动条逻辑及代码编写 4. 滚动条的卡段优化 5. 小程序组件的编写及应用尾声先 ...
小程序弹窗的几种形式
小程序弹窗的几种形式一.wx.showToast(Object object) 显示消息提示框 1.不带图标的信息提示 wx.showToast({title: '服务暂未开通',icon: 'no ...
php自定义弹窗,微信小程序弹窗自定义的代码
这篇文章主要介绍了微信小程序弹窗自定义实例代码的相关资料,有时候做开发项目的时候需要根据客户需求更改原系统的组件,这里就对小程序中弹窗进行更改,需要的朋友可以参考下微信小程序弹窗首先wxml代 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
微信小程序设置wxss背景图片
微信小程序设置wxss背景图片目前只支持两种: 在线图片如果有自己的服务器可以将图片放到自己的web服务器上: 或者参考这个通过qq相册或百度相册将本地图片变为网上图片通过qq相册或百度相册将本地图 ...

小程序弹窗禁止背景滑动

小程序弹窗禁止背景滑动相关推荐

最新文章

热门文章