微信小程序自定义弹窗滚动与页面滚动冲突

自定义的弹窗滚动和遮罩层下的页面滚动冲突,根据弹窗的显示或者隐藏给页面整体不同的css就ok,直接上代码。

<view class="{{showPopover?'boxhide':'box'}}">view>
这是页面整体的盒子

<view class="particularsbg {{showPopover?'show':'hide'}}">view>
这是弹窗整体的盒子

css 
page{ 
width: 100%; 
height: 100%; 

.box{ 
overflow-y:scroll; 
height: 100%; 

.boxhide{ 
overflow-y: hidden; 
height: 100%; 
}

.hide{ 
display: none; 

.show{ 
display: block; 
}

js部分, 
data{ 
showPopover: false, 

// 弹窗点击隐藏事件 
roomDetails: function (e) { 
var that = this; 
this.setData({ 
showPopover: (!that.data.showPopover) 
}) 
}, 
点击事件赋给谁根据需求来定,这里就不列举了,涉及到项目不放截图了,当弹窗显示的时候用boxhide这个css直接就解决了

你可能感兴趣的:(微信小程序自定义弹窗滚动与页面滚动冲突)