移动端vue小知识点(滚动穿透)

@click.stop 阻止事件冒泡
@click.prevent 阻止事件的默认行为
v-show本质就是通过设置css中的display的值，控制显示与隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

mint-ui的轮播图滚动时引起下面的文字抖动?

样式里添加style=“transform:translateZ(0)”

移动端vant弹出弹框，滚动时下面的页面跟着一起滚动?

这是滚动穿透行为,加上@touchmove.prevent，或者在弹框弹出时动态给body加overflow:hidden，在关闭时再去掉此样式。

终极方案

//打开模态框前调用
fixedBody() {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
},
//关闭模态框后调用
looseBody() {
    const body = document.body;
    body.style.position = '';
    body.style.top = '';
    const top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
}