2020-06-21

1、解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题：

<div dangerouslySetInnerHTML = {{__html:返回的html代码}} ></div>

2、解决微信小程序中的滚动穿透问题

蒙层防穿透问题：当你用fixed 布局让蒙层显示的时候， 手指滑动屏幕会出现底部内容也滑动的现象。

一共有两种情况：

1. 当弹窗没有滚动条的时候：直接监听 catch:touchmove 方法， 然后直接返回就可以了。

// wxml

<view

​  class="fixed-mask"

​  bind:tap="hideMsak"

  ​ wx:if="{{isShowMask}}"

​  catch:touchmove="stopMove">

​      <view class="mask-container" >

​      <view class="mask__item">

​      I am {{dogName}}

​      </view>

  ​ </view>

</view>

// css

.fixed-mask {

position: fixed;

left: 0;

top: 0;

height: 100vh;

width: 100vw;

background: #333;

opacity: 0.8;

z-index: 2;

}

.mask-container {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.mask__item {

margin: 0 auto;

background-color: #ff0015;

text-align: center;

width: 500rpx;

height: 500rpx;

line-height: 500rpx;

margin-bottom: 20rpx;

}

// js

stopMove () {

​  return;

}

2. 当弹窗有滚动条的时候

   动态给底部滚动的元素 添加固定定位。也就是当出现弹窗的时候添加一个 class 样式类

// css

.bottom-fixed {

position: fixed;

left: 0;

top: 0;

overflow: hidden;

}

// wxml

<view class="dog-container {{isShowMask ? 'bottom-fixed' : ''}}"></view>