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

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

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);
	.....
},

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

你可能感兴趣的:(css,html5)