手机浏览器下better-scroll中click事件,链接无效的问题

最新推荐文章于 2022-01-20 10:03:14 发布

原创最新推荐文章于 2022-01-20 10:03:14 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue-js #scroll

vuejs 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何解决在Vue.js项目中使用Better Scroll时遇到的点击穿透问题，通过设置tap为true来启用tap事件，从而避免点击div内的a链接或click事件失效的情况。

现在大多数vuejs . 项目都使用better-scroll

但是大多数出现一个问题，就是在大的div里面的a 链接或者click事件都不用了

这是 html 部分

 <div ref="wrapper" class="list-wrapper">
      <div class="setting-list" ref="setting" >
        <div class="setting-list-li" v-for="(value,key) in theme">
          <router-link :to="`/theme/${value.c_type}`" @click.native="change" class="item">
          </router-link>
        </div>
      </div>
    </div>

这是js部分

 import BScroll from 'better-scroll'

  export default {
    mounted () {
      this.$nextTick(function () {
        setTimeout(() => {
          const options = {
            scrollY: false, // 因为scrollY默认为true，其实可以省略
            scrollX: true,
            mouseWheel: true,
            click: true,
            taps: true
          }
          this.scroll = new BScroll(this.$refs.wrapper, options)
        }, 20)
      })
    }
  }