微信小程序 ISO遮罩层背景可移动

第一次用微信小程序原生写代码 需求是有一个活动规则的弹窗 只显示一部分 其他的要下滑才能看到 相信大家也不陌生 就是很常见的活动规则的样式

但是iOS会出现 滑动的时候 弹窗下面的背景也跟着一起滑的bug
首先 横向移动可以给最外层的父盒子 加overflow-x: hidden;
但是纵向移动同样的overflow-y: hidden;就没用了

解决的办法是 给弹窗的遮罩层盒子 加一个touch事件 然后在js里随便return一下 另外要注意小程序中滚动的部分要用scroll-view容器装，不能像平常给父盒子设置overflow：scroll这种的

下面是代码

   <!-- 规则弹窗 wtml -->
    <view class="mask" wx:if="{{isMask}}" catchtouchmove='notMove'>
        <view class="pop">
            <view class="bg">
                <!-- <img clas='bg_img' src='pop/bgChoose.png' /> -->
                <image class="bg_img" src="{{imgUrl+'pop/bgChoose.png'}}" mode="widthFix" />
            </view>
            <!-- 需要滚动的规则图片 -->
            <scroll-view scroll-y="true" class="text">
                <!-- <img clas='text_img' src='login/text.png' /> -->
                <image class="text_img" src="{{imgUrl+'login/text.png'}}" mode="widthFix" />
            </scroll-view>
        </view>
    </view>
</view>

//js
        // 规则
        openRule() {
            this.setData({ isMask: true })
        },
        closeRule() {
            this.setData({ isMask: false })
        },
        //随便return一下 解决背景滑动问题
        notMove() {
            return false
        },