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