better-scroll+Vue、div的@click无效解决方法
正常情况,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>