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

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

<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> 

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