当先锋百科网

首页 1 2 3 4 5 6 7

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>