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

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

解决微信小程序自定义弹窗滚动与页面滚动冲突_第1张图片

实现步骤:
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>  
  
<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;
}

你可能感兴趣的:(微信小程序)