微信小程序弹框滑动冒泡，外层页面也被滑动问题

1、弹框中内容不滚动。

<view class="uni-popup__wrapper-box" catchtouchmove='true'>

滑动弹窗外层页面就不会跟着滑动啦。
2、弹框中内容滚动
如果弹窗里面的内容可滑动滚动，当弹框内容滑倒底部时，再滑外层页面就会被滑动。个人处理办法如下：

<view :class="isScroll ? '' : 'no-srcoll'">..........
</view>

在页面最外层再加上一层标签，给标签一个动态的样式no-srcoll.

.no-srcoll {height: 100%;overflow: hidden;
}

添加一个事件，用来控制样式，

// 是否禁止页面滚动
changeScroll(e) {console.log('index:', e);this.isScroll = e;
},

分别在弹框打开和关闭时调用，

open() {//打开弹框时页面禁止滑动this.$emit('changeScroll', false);.....
},close(type) {//关闭弹框时页面允许滑动this.$emit('changeScroll', true);.....
},

这样当打开弹框时，外层页面就不会被滑动啦，弹窗内的滑动不会受影响。

微信小程序弹框滑动冒泡，外层页面也被滑动问题相关推荐

微信小程序弹框禁止下面的页面滚动
一句话搞定: catchtouchmove="true" <view class="mark" wx:if='{{show}}' catchtouchmo ...
微信小程序弹框组件封装
popup组件,居中和底部弹起 1.popup.wxml <view class="popup-common fade-in-linear-enter-active {{ flag ? ...
微信小程序搜索框以及简单的页面内容搜索的实现
1 效果先来看一下效果 2 设计思路 2.1 显示效果的设计本示例包含两种不同的搜索框,第一种搜索框是在最初状态下显示的搜索框,它由一个输入框input和一个表示"搜索"的图片 ...
微信小程序宽高百分百，解决页面仍然可滑动问题
很多时候,我们会希望将内容充满整个屏幕(高度.宽度100%),如下图但是我们设置好page{height:100%;}发现页面并不是满屏,反而好像是溢出了,导致真机测试的时候可以上下滑动. 想要解决 ...
小程序弹框出现，底部页面也跟随滚动
设置 catchtouchmove="true" <view class="modal" catchtouchmove="true"& ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序提示框提示
微信小程序提示框很常见,有的项目弹出提示选择关闭的时候需要不再弹出,清理缓存的时候才弹出. var s = wx.getStorageSync('sh')if (s == '') {// s= tru ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
微信小程序-气泡框 Popover
写在前面记录基于微信小程序-气泡框实现中产生的问题及思考问题截图问题描述模拟器显示正常,但在真机上点击后,气泡框的箭头并没有消失,且点击同一级别区域,能利用覆盖消除箭头.[是不是一个很可爱的b ...

微信小程序弹框滑动冒泡，外层页面也被滑动问题

微信小程序弹框滑动冒泡，外层页面也被滑动问题

微信小程序弹框滑动冒泡，外层页面也被滑动问题相关推荐

最新文章

热门文章