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

最新推荐文章于 2023-04-23 11:06:02 发布

「已注销」

最新推荐文章于 2023-04-23 11:06:02 发布

阅读量2.7k

点赞数 1

分类专栏：微信小程序

原文链接：https://www.jianshu.com/p/e8d578f846c6

版权

微信小程序专栏收录该内容

3 篇文章 1 订阅

订阅专栏

思路：底层不用管，在遮罩层view添加<view class="shade" wx:if="{{shows}}" bindtap='close' catchtouchmove='ture'></view>，遮罩层文字滚动模块用scrollview组件。

<view bindtap='checkclick'>

<!-- 遮罩层 -->

  <view class="shade" wx:if="{{shows}}" bindtap='close' catchtouchmove='ture'></view>

  <!--弹出面板区域  -->

  <view class="cont" wx:if="{{ shows}}"catchtouchmove='ture'>

    <view style="height:100%;">

      <view class="cont-header">

        <view class="cont-header-name">详情</view>

        <view class="cont-header-close" bindtap='close'>关闭</view>

      </view>

      <scroll-view class="cont-body" scroll-y="true" style="height:calc(100% - 55px);">

        <view class="cont-body-title">门店</view>

        <view class="cont-body-subtitle">药房宁夏路01号门店、药房宁夏路02号门店、药房宁夏路03号门店、药房宁夏路04号门店</view>

      </scroll-view>

    </view>

  </view> 

 </view>

  data: {

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

    shows: false,

},

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

checkclick: function (e) {

    var that=this;

    that.setData({

      shows: true,

    });

  },

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

  close: function () {

    this.setData({

      shows: false,

    })

  },

/*遮罩层 */

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

}