木灵鱼儿
阅读:1949
vue 使用better-scroll创建一个横向滚动并处理谷歌浏览器cancelable=false报错
本想着有木有人写好现成的组件,搜索了下,并没有,于是只能用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();
},
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...
