我一直在想什么样的标题才能描述清楚我想要说的问题，文章中不会写如何创建自定义弹窗,如果有这类需求的同学请移步自行Google。
最近在做微信小程序的开发，涉及到自定义弹窗，然而当我的表单页面过长，同时自定义弹窗也过长，即两者都需要滚动的时候，问题出现了，如下图所示：
test.gif
问题：当我滚动弹窗时，后面的页面也会跟着滚动
1.最初我以为是样式文件中z-index属性的问题，但无论我怎么修改z-index属性，都无果而终。
2.怀疑是我的布局结构不合理，但无论是蒙版布局还是整体布局，以及弹窗的布局，改了又改，换了又换，这个问题依然存在
折腾了好久以后，突然有了想法：
在打开弹窗的时候，让页面不可滚动；关闭弹窗后，恢复页面滚动
实现步骤：
1.整个布局用
<scroll-view>作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{isScroll}}">
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true
结果如下图：
result.gif
这样就解决了弹窗与页面的滑动冲突，算是投机取巧吧，有碰到这个问题的同学可以参考一下，如果有疑问或者更好的解决办法，麻烦告知我，在此谢过~
下面，附上demo的源代码：
1.JS:
// text005.js
Page({
/**
* 页面的初始数据
*/
data: {
arrayData: null,
dialogData: null,
isDialogShow: false,
isScroll: true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//构建测试数据
let data = new Array();
let dialog = new Array();
for(let i = 0; i < 25; i++){
data[i] = '我是测试-----------' + i;
dialog[i] = {
name: '我是弹窗-' + i,
isSelected: false
};
}
this.setData({
arrayData: data,
dialogData : dialog
});
},
/**
* 显示、关闭弹窗
*/
showDialog: function (e) {
var currentStatu = e.currentTarget.dataset.statu;
console.log('currentStatu:', currentStatu);
//关闭
if (currentStatu == "close") {
this.setData({
isDialogShow: false,
isScroll: true
});
}
// 显示
if (currentStatu == "open") {
this.setData({
isDialogShow: true,
isScroll: false
});
}
},
})
2.wxml：
<!--text005.wxml-->
<scroll-view scroll-y="{{isScroll}}">
<view class="rootView">
<view class="inTable">
<view wx:for="{{arrayData}}" wx:key="" class="unitItemLeft" bindtap="showDialog" data-statu="open">
<input class="baseItemWithBorder" value="{{item}}" disabled />
</view>
<!--测试弹窗-->
<view class="dialogMarsk" bindtap="showDialog" data-statu="close" wx:if="{{isDialogShow}}"></view>
<!--dialog-->
<view class="dialog" wx:if="{{isDialogShow}}">
<view class="appreciationTitle">
<text style="font-size:24px;">我是弹窗</text>
</view>
<view wx:for="{{dialogData}}" class="appreciationTable">
<view class="unitItemLeft">
<text class="baseItemWithBorder">{{item.name}}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
3.wxss：
/* text005.wxss */
Page {
/* background: #1baceb; */
position: absolute;
font-size: 36rpx;
width: 100%;
height: 100%;
display: block;
background: #FAFAFA;
overflow-y: hidden;
}
scroll-view {
height: 100%;
}
.rootView{
/* width: 100%; */
padding: 10rpx;
display: flex;
flex-direction: column;
}
.baseItemWithBorder{
flex-grow: 1;
height: 100%;
padding-left: 20rpx;
padding-right: 20rpx;
border-bottom: solid 1rpx gainsboro;
}
.inTable{
width: 100%;
display: flex;
box-shadow:5px 5px 10px gray;
flex-direction: column;
margin-top: 40rpx;
background: white;
}
.inDetail{
width: 100%;
height: 80rpx;
display: flex;
}
.unitLeft{
justify-content: flex-start;
padding-left: 20rpx;
}
.unitItemLeft{
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
}
.dialogMarsk {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.6);
overflow: hidden;
}
.dialog {
width: 80%;
height: 50%;
position: fixed;
top: 10%;
z-index: 1001;
background: #FAFAFA;
border-radius: 3px;
overflow-y: scroll;
}
.appreciationTable{
width: 98%;
display: flex;
flex-direction: column;
background: white;
margin: 0 10rpx;
}
.appreciationTitle{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
