vue 移动端弹窗后禁止页面滚动 @touchmove.prevent

可以在遮罩层中添加 @touchmove.prevent 就可以实现禁止页面滚动

注意 弹窗里面有滚动条的也是无法滚动的

 <div class="popup" @touchmove.prevent></div>
 
.popup {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}
 
.popup-content {
  margin: 0 0.32rem;
  position: relative;
  height: 100vh;
}

<template>
  <div class="popup" @touchmove.prevent>
    <div class="popup-content" @click.stop="close" v-show="bags">
      <div class="content">
        <div class="close-content">
          <img
            class="close"
            @click="close"
            :src="joinMediaUrl('210616112943168.80.80.1.2423')"
            alt=""
          />
          <div class="content-title" v-if="content && content[0]">
            <div class="left">
              {
   
   { content && content[0].title }}
              <div class="people">
                <span>{
   
   { content && content[0].actionCount }}人在聊</span
                ><img :src="joinMediaUrl('210616141844713.36.48.1.2654')" />
              </div>
            </div>
            <div class="btn" @click.stop="participate(content && content[0])">
              立即参与
            </div>
          </div>
        </div>
 
        <div class="size">
          <div
            v-for="(sizes, type) in size"
            :key="type"
            @click.stop="column(sizes)"
          >
            <div class="item">
              <img :src="joinMediaUrl(sizes.icon)" />
              <div class="size-content">
                <div class="title">
                  <span class="text" ref="text">{
   
   { sizes.name }}</span>
                  <div class="tag_r">
                    <div class="tag_a" v-if="sizes.moneyTip">
                      <van-tag type="primary" :color="'#D85033'">{
   
   {
                        sizes.moneyTip
                      }}</van-tag>
                    </div>
                  </div>
                </div>
                <p class="details">{
   
   { sizes.desc }}</p>
              </div>
            </div>
            <p class="line" v-if="type !== size.length - 1"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../../utils/request";
import { joinMediaUrl } from '../../utils';
import FastClick from 'fastclick';
import { resize } from '@/utils/resize';
 
import Vconsole from 'vconsole'
if (process.env.NODE_ENV === 'development') {
  new Vconsole();
}
 
export default {
  name: 'issuePopup',
  data () {
    return {
      content: [],
      size: [],
      bags: true,
      isJumpH5: false,
    };
  },
  methods: {
    joinMediaUrl,
    close () {
      this.bags = false
      this.$zhiyue.closePage();
    },
    participate (e) {
      let viewType = 'clip'
      let id = e.clipId
      if (e.clipId == 0) { viewType = 'subject', id = e.subjectId }
      request({
        url: '/user/click',
        params: {
          type: 'view',
          entry: 'homepost',
          subEntry: 'join',
          entryId: '',
          viewType: viewType,
          subViewType: 'click',
          viewId: id,
        },
      }).then(res => {
      })
      this.$zhiyue.jump(viewType, id)
    },
 
    column (e) {
      let viewType = 'other'
      if (e.moneyTip == 'hot') { viewType = 'hot' }
      if (e.moneyTip.substring(0, 1) == '赚') { viewType = 'money' }
      if (e.moneyTip == '') { viewType = 'common' }
      request({
        url: '/user/click',
        params: {
          type: 'view',
          entry: 'homepost',
          subEntry: 'cliplist',
          entryId: '',
          viewType: viewType,
          subViewType: 'click',
          viewId: e.clipId
        },
      }).then(res => {
      })
      // this.$zhiyue.post(e.clipId);
      //广场发帖
      var domainName = ''
      if (process.env.NODE_ENV === 'development' || location.origin == 'http://api.appgc.yidian-inc.com' || location.origin == 'http://test.jwshq.cn') {
        domainName = 'http://testex.api.appgc.yidian-inc.com'
      } else {
        domainName = 'https://ex.jwshq.cn'
      }
      console.log(e.name, domainName, this.isJumpH5, '参数')
      if (e.name == '老板直聘' && this.isJumpH5) {
        let url = `${domainName}/zhipin/perfectResume/releasePost?view=1p&fromPost=${true}`
        this.$zhiyue.postJobH5(e.clipId, url)
      } else {
        this.$zhiyue.post(e.clipId);
      }
    }
  },
  created () {
    resize()
    request({
      url: '/clip/indexPost',
      params: {},
    }).then(res => {
      this.$nextTick(() => {
        this.content = res.data.data && res.data.data.subject;
        this.size = res.data.data && res.data.data.clip;
        this.bags = true
      })
    })
  },
  mounted () {
    this.$zhiyue.getAppInfo(r => {
      let ver = null
      var u = navigator.userAgent;
      var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isIOS) {
        ver = JSON.parse(r).Ver
      } else {
        ver = JSON.parse(r).verNum
      }
      if (ver >= 210815) {
        //新版本老板直聘可以跳转到H5发布职位
        this.isJumpH5 = true
      } else {
        //老版本跳转
        this.isJumpH5 = false
      }
    })
    FastClick.attach(document.body)
  }
};
</script>
<style>
body {
  background: none !important;
}
</style>
<style lang="scss" type="text/scss" scoped>
@import "../../../node_modules/swiper/css/swiper.css";
.popup {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
}
 
.popup-content {
  margin: 0 0.32rem;
  position: relative;
  height: 100vh;
}
 
.content {
  background: #ffffff;
  width: 100%;
  border-radius: 0.39rem;
  position: absolute;
  bottom: 0.38rem;
  margin-bottom: env(safe-area-inset-bottom);
  margin-bottom: constant(safe-area-inset-bottom);
 
  .close {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    top: 0.24rem;
    right: 0.24rem;
  }
}
 
// .swiper-container {
//   margin: 0 16px;
//   background: #fafafa;
//   margin-top: 0.8rem;
//   border-radius: 57px;
//   height: 0.96rem;
//   .van-swipe-item {
//     padding-left: 16px;
//     padding-right: 16px;
//   }
.content-title {
  margin: 0 16px;
  margin-top: 0.8rem;
  background: #fafafa;
  border-radius: 57px;
  height: 0.96rem;
  padding: 0 0.32rem;
  font-size: 0.28rem;
  font-weight: 500;
  color: #222222;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 0.96rem;
  //
 
  .left {
    display: flex;
  }
 
  .people {
    display: flex;
    align-items: center;
    span {
      color: #999999;
      font-size: 0.24rem;
      margin-left: 0.2rem;
    }
 
    img {
      width: 0.18rem;
      height: 0.24rem;
      margin-left: 0.16rem;
    }
  }
 
  .btn {
    width: 1.36rem;
    height: 0.56rem;
    background: #5a968f;
    border-radius: 0.28rem;
    text-align: center;
    line-height: 0.56rem;
    font-size: 0.24rem;
    color: #ffffff;
  }
}
// }
 
.size {
  margin-bottom: 0.59rem;
  margin-top: 0.72rem;
  .item {
    display: flex;
    align-items: center;
    margin: 0.29rem 0.46rem;
    img {
      width: 0.5rem;
      height: 0.5rem;
    }
    .size-content {
      margin-left: 0.22rem;
      position: relative;
 
      .title {
        font-size: 0.29rem;
        font-weight: 500;
        color: #222222;
        display: flex;
 
        .text {
          margin-right: 0.1rem;
        }
 
        .tag_r {
          position: relative;
          width: 20px;
          height: 10px;
          font-size: 0.19rem;
        }
 
        .tag_a {
          position: absolute;
          top: -0.2rem;
        }
        ::v-deep .van-tag {
          width: max-content;
          font-size: 0.19rem;
          border-radius: 12px 12px 12px 0px;
          padding: 0.01rem 0.14rem;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
        }
 
        // .bubble {
        //   width: max-content;
        //   display: inline-block;
        //   color: #ffffff;
        //   background: #849b23;
        //   padding: 0.04rem 0.07rem;
        //   white-space: nowrap;
        //   // border-radius: 12px 12px 12px 0px;
        //   // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
        //   .t {
        //     overflow: hidden;
        //     width: 100%;
        //   }
        // }
      }
 
      .details {
        font-size: 0.25rem;
        font-weight: 400;
        color: #999999;
        margin-top: 0.03rem;
      }
    }
  }
 
  .line {
    height: 1px;
    display: flex;
    flex: 1;
    background: #eeeeee;
    margin-left: 1.18rem;
    margin-right: 0.48rem;
  }
}
</style>

第二种方法：

isMark是判断弹窗是否弹出，当isMark为true就是弹窗弹出的时候，设置body样式

watch: {
    isMark (newValue) {
      newValue
        ? document.getElementsByTagName('body')[0].classList.add('stop-scroll')
        : document
          .getElementsByTagName('body')[0]
          .classList.remove('stop-scroll');
    }
  }

.stop-scroll {
    left    : 0;
    position: fixed;
    top     : 0;
    height  : 100%;
    overflow: hidden;
    width   : 100%;
}