微信小程序-自制弹出框禁止页面上下滑动

JAY.LIN 收录于微信小程序

2018-03-29 约 285 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=79742350

微信小程序-自制弹出框禁止页面上下滑动

在微信小程序里面的弹出框有时候不能满足我们的需求，需要自己写弹出框，但是要保证页面不要上下滑动，解决方法是在遮盖层上用绑定手指触摸事件 catchtouchstart 。

微信小程序有 bind 和

catch

两种事件绑定方法，

bind

事件绑定不会阻止冒泡事件向上冒泡，

catch

事件绑定可以阻止冒泡事件向上冒泡。

我们使用

catch绑定手指触摸事件，

然后他的父节点就不会收到事件冒泡，这样就实现了

禁止页面上下滑动

示例：

wxml:

<view class='mask' catchtouchstart='test'></view>
<view class='modal'>弹窗</view>

wxss:

.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.6)
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 400rpx;
  z-index: 1001;
  background-color: #fff;
}

js:

test:function(){

  },

目录

微信小程序-自制弹出框禁止页面上下滑动

微信小程序-自制弹出框禁止页面上下滑动