解决办法:

1.直接在最外层的view添加以下动态样式

rulePioneShow: 为控制弹窗展示或者隐藏的字段

 :style="{height:rulePioneShow==true?'100vh':'atuo',overflow:rulePioneShow==true?'hidden':'visible' }"

2.或者在弹窗蒙层出现mask的最外层结构添加@touchmove.stop.prevent 也防止弹窗外的地方滑动

需要注意:(开发者工具是无法测试的,需要在预览或者真机测试才有效果)

      <view class="mask" v-if="rulePioneShow"  @touchmove.stop.prevent>
        <view class="mask-content">
          <view class="mask-rule">
            <image src="/static/images/left-icon.png" style="width:60rpx;height:30rpx"></image>
            <view style="padding: 0 20rpx;">积分规则</view>
            <image src="/static/images/right-icon.png" style="width:60rpx;height:30rpx"></image>
          </view>
          <scroll-view scroll-y="true" :enhanced="true" :show-scrollbar="false" style="height: 800rpx">
            <image style="width:700rpx;height:800rpx;border-radius: 20rpx;" mode="widthFix"
              src="https://oss.lanlnk.com/gxjtbbc/default/202307/21/u20L7w6grqIIsGoGSNV9e9f2enKfcKPl5i104kQh.png">
            </image>
          </scroll-view>
        </view>
      </view>
      <view class="close-container" v-if="rulePioneShow" @click="rulePioneShow=false">
        <image class="close-button"
          src="https://oss.lanlnk.com/gxjtbbc/default/202307/20/oGeQqCDeHKBDAVBxzy62URvd27DPzXuqToS4X3It.png"></image>
      </view>