vue移动端 弹窗细节问题汇总

1、滑动弹窗时，禁止底部列表滑动

1.1、列表加节点 弹窗加开关

<div class="list"></div>

<Collapse :isShow="isShow" :isBeBlue="isBeBlue" id = "alertBoxId">
    <div class="alertlist"></div>
</Collapse>

data () {
    return {
      isShow: false,
      isBeBlue: 0, // 高亮
    }
  }

1.2、监听弹窗开关

  watch: {
    /* 监听弹窗，开启时列表不允许滚动，关闭时开启官方 */
    isShow (val) {
      if (val) {
        document.querySelector('.list').setAttribute('style', 'position:fixed;left: 0px;right: 0px;overflow: hidden;')
      } else {
        document.querySelector('.list').removeAttribute('style')
      }
    }
  },

2、关闭当前页面时，弹窗关闭

2.1、方法一，关闭弹窗开关

 destroyed () {
    this.isShow = false
  }

2.2、方法二，删除弹窗节点

 destroyed () {
    // let alertBoxId = document.getElementById('alertBoxId')
    // if(alertBoxId){
    //   alertBoxId.remove()
    // }
  }

3、点击弹窗时，内部列表下滑到高亮位置

1、主要使用dom的scrollTop来跳转，具体跳转的数字要根据父盒子和子盒子的大小来调整 2、注意一定要写this.$nextTick 3、弹窗要用v-show，v-if在弹窗出现时获取不到dom

if (this.isBeBlue > 3) { // 如果高亮在列表靠下的位置，就网上滚动
  this.$nextTick(() => {
  	document.querySelector('.alertlist').scrollTop = 60*(this.isBeBlue - 2)
  });
 }