<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • <>vue-解決彈出蒙層滑動穿透問題

    在一個可滑動列表頁彈出一個全屏蒙層,蒙層固定,中間一塊顯示消息框,當用手滑動蒙層空白處時,滑動事件會穿透到底部列表頁,導致列表頁的滑動。

    1. vue提供的 @touchmove.prevent 可以
    用來阻止滑動,但是這個方法會對其內的子div的滑動事件也禁止掉了,這樣會導致中間彈框的文字無法滑動。如果沒有中間滑動需求,用
    @touchmove.prevent 實現是一個很好的方法。
      
      2. 蒙層設為fixed懸浮在最上,底部列表設置overflow-y:
    hidden;這樣可以列表內容就不可以滑了,但實際過程中沒有效果,于是想到繼續往列表父div向上追溯,
    對body和html標簽設置相關樣式,這樣就控制住了底部列表滑動問題。

    3. 蒙層空白處點擊事件與中間文字點擊事件處理,防止事件冒泡帶來其他bug。

    1. html代碼都是比較簡單,列表頁for循環實現;蒙層用一個變量控制其顯示和隱藏。但這里有幾個注意點: a. 給上面列表的div動態綁定了
    noScroll class,它的作用是當消息蒙層顯示時切換到相關的css樣式; b.
    彈出的全屏蒙層,加有點擊事件是為了點空白處讓蒙層消失,但這里對顯示的每行文字還加了@click.stop="messageTitleClick(num)"這個方法,為什么加它呢——是因為蒙層空白處的點擊方法對整個蒙層都生效,在文字上加上這個方法可以屏蔽掉蒙層點擊方法的影響,即使這個方法里什么也不做它也是有作用的,另外這個方法上加了stop是為了防止它的點擊事件穿透到后面的div。代碼如下:
      <!-- 列表 --> <div :class="{noScroll: isShowPopup}"> <div class="item"
    v-for="num in 50" @click="itemClick(num)"> <div style="width:100%">點擊item{
    {num}}</div> </div> </div>    <!-- 蒙層 --> <div v-if="isShowPopup" class="popup"
    @click="popUpEmptyClick()"> <div class="message"> <p class="message-title"
    v-for="num in 30" @click.stop="messageTitleClick(num)"> 消息提示 ,確認 </p> </div>
    </div>
    * 給整個列表動態綁定的css如下 /* 當前蒙層顯示時生效 */ .noScroll { overflow-y: hidden; }
    * 給列表整個div動態綁定 .noScroll
    后,底部列表照樣可以滑動,所以考慮繼續向上追溯。利用watch監聽蒙層是否顯示,當顯示時,設置body相應樣式;但蒙層消失時,body樣式恢復。但是在vue里怎么操作body里,雖然vue是數據驅動的,不提倡直接操作Dom。但此刻我也是沒什么好辦法了,就直接操作Dom了。如下:
    watch: { isShowPopup(newVal, oldVal) { if (newVal == true) { let cssStr =
    "overflow-y: hidden; height: 100%;";
    document.getElementsByTagName('html')[0].style.cssText = cssStr;
    document.body.style.cssText = cssStr; } else { let cssStr = "overflow-y: auto;
    height: auto;"; document.getElementsByTagName('html')[0].style.cssText =
    cssStr; document.body.style.cssText = cssStr; } // 下面需要這兩行代碼,兼容不同瀏覽器
    document.body.scrollTop = this.pageScrollYoffset; window.scroll(0,
    this.pageScrollYoffset); } }
    另一種方式是直接在method里面用addEventListen進行監聽,采用方式如下
    。。。 <template> <div id="actPage"> <div v-if=rulesShow ></div> </div>
    </template> 。。。 methods:{ //蒙層展示 swiperStop() { this.rulesShow = true
    this.$nextTick(() => { this.disabledSrcoll() }) }, //置灰層停止穿透滑動 disabledSrcoll()
    { document.getElementById('actPage').addEventListener('touchmove',
    this.lockBody) }, //置灰層停止滑動 lockBody(e) { // e.preventDefault &&
    e.preventDefault();【這種方式會連著子元素的滾動一起滑動,如果無子元素滾動要求可以使用】
    document.body.style.overflow = 'hidden';
    document.getElementById('app').style.overflow = 'hidden';
    document.html.style.overflow = 'hidden'; }, }

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频