正常情况,div可以直接点击
<template> <div> <div @click="divClick()" style="height:50px; background:#69cfff;">div点击</div> </div> </template> <script> export default { name:"Profile", methods:{ divClick(){ console.log("divClick222"); } } } </script> <style scoped> </style>使用better-scroll的时候，需要在构造函数绑定click:true,div的@click才可以使用，而button不受影响， 因为使用了better-scroll，默认它会阻止touch事件
<template> <div class="wrapper" ref="aaa"> <!-- 1.当使用了Better Scroll 时，无论是否设置click:false,button都可以点击 --> <button @click="btnClick">button点击</button> <!-- 2.当使用了Better Scroll 时，必须设置click:true(new BScroll(...))，div才可以点击 --> <div @click="divClick()" style="height:50px; background:#69cfff;">div点击</div> <ul class="content"> <button @click="btnClick">按钮</button> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> <li>lalal</li> </ul> </div> </template> <script> // category使用better-scroll import BScroll from 'better-scroll' export default { name:"Category", // data(){ // return{ // scroll:null // } // }, //组件创建完成后调用 // created(){ // this.scroll = new BScroll('.wrapper',{ // }) // } mounted(){ // console.log(document.querySelector('.wrapper')); // console.log(this.$refs.aaa); this.scroll = new BScroll(document.querySelector('.wrapper'),{ probeType:3, pullUpLoad:true, click:true }) this.scroll.on('scroll',(position) => { console.log(position); }) this.scroll.on('pullingUp',() => { console.log('上哪加载更多'); }) // this.$nextTick(() => { // this.scroll = new BScroll(this.$refs.aaa, {}) // }) }, methods:{ btnClick(){ console.log('btnclick'); }, divClick(){ console.log("divClick"); } } } </script> <style scoped> .wrapper{ height: 80px; background-color: pink; overflow: hidden; /* overflow-y:scroll; */ } </style>