微信小程序 弹出遮罩层滚动 禁止底层滚动问题

思路：底层不用管，在遮罩层view添加，遮罩层文字滚动模块用scrollview组件。

wxml：

 

 

 

   

     

        详情

        关闭

     

     

        门店

        药房宁夏路01号门店、药房宁夏路02号门店、药房宁夏路03号门店、药房宁夏路04号门店

     

    

   

 

js：

  data: {

    // 一开始遮罩层与面板隐藏

    shows: false,

},

// 点击整个view弹出遮罩层

checkclick: function (e) {

    var that=this;

    that.setData({

      shows: true,

    });

  },

// 点击遮罩层，显示的遮罩层与面板又隐藏起来

  close: function () {

    this.setData({

      shows: false,

    })

  },

wxss：

/*遮罩层 */

.shade {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 1;

  background-color: rgba(0, 0, 0, 0.8);

  opacity: 0.5;

  overflow: hidden;

}

.cont {

  top: 161px;

  bottom: 161px;

  left: 58px;

  right: 58px;

  border-radius: 10px;

  z-index: 2;

  overflow: hidden;

  position: fixed;

  font-size: 32rpx;

  background-color: white;

}

.cont-header {

  font-size: 18px;

  font-family: PingFang SC;

  font-weight: 400;

  line-height: 22px;

  color: rgba(0, 0, 0, 1);

  opacity: 1;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  text-align: center;

  height: 55px;

  padding-left: 15px;

  padding-right: 15px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.cont-header-name {

  color: black;

}

.cont-header-close {

  color: rgba(155, 155, 155, 1);

}

.cont-body {

  justify-content: space-between;

  align-items: center;

  text-align: left;

  font-size: 14px;

  font-family: PingFang SC;

  font-weight: 400;

}

.cont-body-title {

  font-weight: bold;

  padding: 15px 13px 5px;

}

.cont-body-subtitle {

  padding: 5px 13px;

}