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

先看效果是否是自己需要的

实现步骤：
1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true
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
});
}
}
})

wxml：

<button>做点什么</button>
<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>
</view>
</scroll-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>

wxss：

Page {
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;
}