木灵鱼儿

木灵鱼儿

阅读:499

最后更新:2021/01/13/ 17:51:11

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();
},

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 499

相关文章