vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错

本想着有木有人写好现成的组件，搜索了下，并没有，于是只能用better-scroll插件来做了。

先看下效果图：

教程

具体的详细内容就不多说了，直接讲一下他的实现要求。

1. 最外围一个wrap容器，用于初始化的，他的宽度自己设置，然后overflow: hidden;必须设置，你也可以只设置x轴。
2. wrap下面是一个宽度容器，content，他的宽度必须是他下面子元素宽度之和，比如有3个子元素，子元素的宽度是200，content就是3*200的宽度
3. content容器下面就是具体的子元素了，尽量不用用margin做间隔，因为js获取margin不是很方便，可以多套个div元素，用padding来做分割。

html部分：

<div class="item-wrap" ref="itemWrap">
    <div class="item-content" ref="itemContent">
        <div class="item" v-for="item in data" :key="item.name" ref="mealItem">
            <div class="meal-item">{{item.name}}</div>
        </div>
    </div>
</div>

scss部分：

$space是我设置的全局变量，值为16px

.item-wrap {
    overflow: hidden;
    .item-content {
       white-space: nowrap;
     }
    .item {
        padding-left: 16px;
        display: inline-block;
        width: calc(203px + #{$space});
        &:last-child {
            padding-right: $space;
            width: calc(203px + #{$space * 2});
        }
    }
    .meal-item {
        height: 304px;
        background-color: #fff;
    }
}

注意： item子元素虽然设置了inline-block，然后他的父级的宽度是js计算的，理论上是不会发生换行的，因为宽度足够，但是在手机端，个别手机浏览器会发生换行，所以一定要给item的父级设置white-space: nowrap;阻止换行。

这样一个基本的结构就搭建好了，我们设置js部分

首先安装插件：

yarn add better-scroll --dev

安装完毕后引入

<script>
  import BScroll from "better-scroll";
  export default {
    methods: {
      //横向滚动
      personScroll() {
        this.$nextTick(() => {
          const itemRefs = this.$refs.mealItem;
          if (!itemRefs.length) return;
          //计算总宽度
          let width = itemRefs.reduce((prevItem, nextItem) => {
            const leftVal =
              typeof prevItem === "number" ? prevItem : prevItem.offsetWidth;
            return leftVal + nextItem.offsetWidth;
          });
          this.$refs.itemContent.style.width = width + "px";
          //初始化
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.itemWrap, {
              scrollX: true,
              eventPassthrough: "vertical",
            });
          } else {
            this.scroll.refresh();
          }
        });
      }
    }，
    created() {
      this.personScroll();
    }
  }
</script>

这样基本就完成了，主要就是js获取子元素，然后计算到总宽度，然后给content设置宽度。

然后再初始化BScroll，配置BScroll就行了，把warp作为容器元素。

补充：

如果需要y轴触摸该区域是，能够触发浏览器滚动，就需要设置eventPassthrough: "vertical"，默认设置x轴滚动，当用户在该区域上下滑动时是没法滚动的，像是卡死了一样。

但是使用该属性，谷歌浏览器会疯狂红色警告，报错如下

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

目前我找到的唯一办法就是修改模块源码，为此，我们可能没法引入部分better-scroll代码了，没办法，想要没警告就只能这样，或者将就，反正这个报错不会影响代码的正常使用。

去除报错的方法

我们找到better-scroll的模块，找到里面dist/better-scroll.esm.js文件，复制一份，丢到自己项目里面，我为此还特意在src下建了一个my_modules目录专门存这个修改后的模块。

复制完毕后打开，找到这段代码：

var PassthroughHandlers = (_a = {},
    _a["yes" /* Yes */] = function (e) {
        return true;
    },
    _a["no" /* No */] = function (e) {
        e.preventDefault();
        return false;
    },
    _a);

为什么是这段代码，因为浏览器报错那，第一个报错位置就是这里，所以是这段，可能你的文件略有不同，你只要找到报错的位置就行了，反正报错的那段代码肯定包含了这句：e.preventDefault();

改造

var PassthroughHandlers = (_a = {},
  _a["yes" /* Yes */] = function (e) {
    return true;
  },
  _a["no" /* No */] = function (e) {
    if (e.cancelable) {
      if (!e.defaultPrevented) {
        e.preventDefault();
        return false;
      }
    }
  },
  _a);

改成这段就行了。然后保存，在vue文件中改下引入路径

<script>
import BScroll from "@/my_modules/better-scroll.esm";
</script>

保存，项目重启，现在怎么弄都不会再报错了。

改造使用基础滚动

上一个方式改的是完整版，代码很多，事实上很多情况用不着，所以我们改用一些基础版

在node_modules文件夹中找到@better-scroll，里面有个core目录，我们照搬这个目录结构，只复制core目录。

然后一样找到core/src/core.esm.js文件，改动相同的地方，就行了。

调整引用：

<script>
import BScroll from "@/my_modules/@better-scroll/core";
</script>

优化

因为每次都初始化了this.scroll，但是当这个页面销毁后，这个可能还会存在，因为有帮到事件那些，所以可以在销毁前手动销毁下实例。

beforeDestroy() {
  //手动销毁
  this.scroll.destroy();
},