
有一个 class 为 layer 的 div, 使用了 v-on:touchmove.prevent ,应该阻止了背景滚动,可是背景列表还是会滚动,求解,代码如下。
<template> <div id="app"> <!--<my-button @click.native="buttonClick"></my-button>--> <img src="./assets/logo.png"> <!--<router-view></router-view>--> <ul> <li v-for="item in list"> <h1>{{ item }}</h1> </li> </ul> <div class="layer" v-on:touchmove.prevent></div> </div> </template> <script> // import myButton from '@/components/MyButton.vue' export default { // components: { // myButton // }, data () { return { list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] } }, methods: { buttonClick () { alert('原生点击') } }, name: 'app' } </script> <style> body, html {width: 100%; height: 100%} h1{margin-top:10rem;} .layer{width:100%;height: 100%;position: fixed;top:0;left:0;z-index: 99;background:rgba(0, 0, 0, 0.5)} #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>