vue移动端禁止弹层穿透、点击元素滚动到视图中心杂文日志

一，需求是在无限列card加载页面，点击任何一个card的显示图表按钮，图表自适应居中显示，显示遮罩层，页面可以滑动，但不能穿透点击

一个无限列表加载页面设置遮罩层一般需求是页面不能滑动的，但这比较特殊，需要在原有card通过点击或下拉显示图表，从而遮罩层要遮罩整个滑动高度，这样也解决了不能穿透点击，

这就需要将遮罩层作为页面最顶层div的子元素，类似这样

 

 设置

.appearance{

position: relative;

}

.unipop__ui_mask[data-v-5de1b649] {

1. position: absolute;
2. width: 100%;
3. left: 0;
4. top: 0;
5. height: 100%;
6. background-color: #000;
7. opacity: 0.4;
8. -webkit-transition: fadelogIn 3s ease-in;
9. transition: fadelogIn 3s ease-in;
10. z-index: 99;

}

图表自适应居中显示,，通过设置

 @click.stop="showEchart(idx,$event)"

$event拿到element

然后设置

showEchart( idx,event) {

this.$nextTick(() => {

        setTimeout(() => {

          var scrollTop = this.$el.querySelector(".content");

          //scrollTop.scrollTop = scrollTop.scrollHeight;

          scrollTop.scrollTop = idx*188;

        }, 13);

      });

}

idx为当前v-for循环的下标，188为每个列表card的高度

 

 

禁止弹框穿透滚动底层，可以设置

<div class=“mask” @touchmove.prevent></div>