vue使用better-scroll实现横向滚动的方法实例
短信预约 -IT技能 免费直播动态提醒
一、滚动的实现原理
better-scroll的滚动原理和浏览器原生滚动原理是一样的,当子盒子的高度大于父盒子的高度,就会出现纵向滚动;同理,如果子盒子的宽度大于父盒子的宽度,那么就会出现横向滚动。
二、better-scroll的 html 结构
先来看一下 better-scroll 常见的 html 结构:
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
BetterScroll应用于外部wrapper容器,并且滚动部分是content。请注意,wrapper默认情况下,BetterScroll处理容器()的第一个子元素(内容)的滚动,这意味着其他元素将被忽略。
三、在Vue中使用better-scroll
npm install better-scroll --save //npm 安装
import BScroll from 'better-scroll' //组件文件中引入better-scroll
<template>
<div
class="wrapper_box"
style="min-height:100vh;
"
ref="wrapper"
v-else
>
<div class="content" ref="wrapperChild">
<div
v-for="(item, index) in currentImgList"
:key="index"
class="imgItem"
>
<img :class="lazy" data-src="item.img" class="img" style="margin: 0 10px;" />
</div>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
data() {
return {
currentImgList: [
{ img: require("../../assets/image/zzb_1.png") },
{ img: require("../../assets/image/zzb_2.png") },
{ img: require("../../assets/image/zzb_3.png") }
],
};
},
mounted() {
this.slide_x(); //横向滚动
},
methods: {
// 初始化
_initScroll() {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, { // 实例化BScroll接受两个参数,第一个为父盒子的dom节点
startX: 0, /// 配置的详细信息请参考better-scroll的官方文档,这里不再赘述
click: true,
scrollX: true,
scrollY: false, // 忽略竖直方向的滚动
eventPassthrough: "vertical",
useTransition: false // 防止快速滑动触发的异常回弹
});
} else {
this.scroll.refresh(); //如果dom结构发生改变调用该方法重新计算来确保滚动效果的正常
}
},
// 计算宽度
_calculateWidth() {
// 获取类名为 imgItem 的标签
let rampageList = this.$refs.wrapperChild.getElementsByClassName(
"imgItem"
);
// 设置一个起始宽度
let initWidth = 0;
// 遍历标签
for (let i = 0; i < rampageList.length; i++) {
const item = rampageList[i];
// 将每一个标签宽度相加
initWidth += item.clientWidth;
}
// 设置可滚动的宽度
this.$refs.wrapperChild.style.width = `${initWidth}px`;
},
slide_x() {
this.$nextTick(() => { //this.$nextTick 是一个异步函数,为了确保 DOM 已经渲染完毕
this._initScroll(); // 初始化
this._calculateWidth(); // 计算宽度
});
},
},
};
</script>
下面是插件原作者说的:
四. 容易出现问题的点:
- 必须等到页面DOM渲染完成再去执行BScroll的实例化,建议在mounted 钩子函数里执行
- 子盒子的宽度大于父盒子的宽度
最后
better-scroll插件作者的文章,发现better-scroll真强大啊!
当 better-scroll 遇见 Vue
在Vue中用better-scroll实现横向滚动
到此这篇关于vue使用better-scroll实现横向滚动的文章就介绍到这了,更多相关vue better-scroll实现横向滚动内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341