本想着有木有人写好现成的组件，搜索了下，并没有，于是只能用better-scroll插件来做了。
先看下效果图：
教程
具体的详细内容就不多说了，直接讲一下他的实现要求。
- 最外围一个wrap容器，用于初始化的，他的宽度自己设置，然后
overflow: hidden;必须设置，你也可以只设置x轴。 - wrap下面是一个宽度容器，content，他的宽度必须是他下面子元素宽度之和，比如有3个子元素，子元素的宽度是200，content就是3*200的宽度
- 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)