vue中的better-scroll横向滚动案例
1.安装
better-scroll 托管在 Npm 上,执行如下命令安装:
npm install better-scroll --save;
2.引入
import BScroll from 'better-scroll'
如果是ES5语法
var BScroll = require('better-scroll')
<template>
<div class="box">
<div class="person-wrap" ref="personWrap">
<ul class="person-list" ref="li1">
<li
class="person-item"
:class="{'current':currentIndex===index}"
v-for="(item,index) in 7"
:key="index"
@click="select(index,$event)"
>第{{item}}块</li>
</ul>
</div>
<div class="wrapper" ref="wrapper">
<div class="content" ref="li2">
<div v-for="(item,index) in 7" :key="index">第{{item}}块</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 100%;
height: 100%;
}
.person-wrap {
overflow: hidden;
height: 38px;
.person-list {
list-style-type: none;
.person-item {
float: left;
line-height: 36px;
margin: 0 16px;
white-space: nowrap;
}
.current {
color: #004299;
border-bottom: 2px solid #004299;
}
}
}
.wrapper {
height: 600px;
background: pink;
overflow: hidden;
.content {
display: block;
div {
height: 200px;
border-bottom: 1px solid red;
text-align: center;
line-height: 200px;
&:last-of-type {
height: 600px;
}
}
}
}
</style>
<script>
import BScroll from "better-scroll";
export default {
name: "better_scroll",
data() {
return {
currentIndex: 0, //当前显示的下标
listHeight: [],
scrollY: 0,
menuIndexChange: true
};
},
created() {
this.$nextTick(() => {
this._initScroll();
this.personScroll();
this.height();
});
},
mounted() {},
methods: {
// 横轴初始化
personScroll() {
// 动态设置宽度
let width = this.width();
this.$refs.li1.style.width = width + "px";
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.personWrap, {
startX: 0,
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: "vertical",
bounce: false
});
} else {
this.scroll.refresh();
}
});
},
//新建滚动实例 并监听竖轴滚动的高度
_initScroll() {
this.wrapperScroll = new BScroll(this.$refs.wrapper, {
click: true, //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。
probeType: 3, //这个属性设置之后可以监听得到了
bounce: false
});
//监听滚动事件
this.wrapperScroll.on("scroll", pos => {
// 当允许滚动并滚动的y轴小于0
if (this.menuIndexChange && pos.y <= 0) {
this.scrollY = Math.abs(Math.round(pos.y)); //滚动距离
// console.log(this.scrollY);
// 循环每一个模块距离顶部的高度
for (let i = 0; i < this.listHeight.length; i++) {
let height1 = this.listHeight[i];
let height2 = this.listHeight[i + 1];
if (
!height2 ||
(this.scrollY >= height1 && this.scrollY < height2)
) {
// console.log(i);
this._followScroll(i); //横轴动画移动
this.currentIndex = i;
return;
}
}
}
});
},
//获取横轴宽度
width() {
let wrap1 = this.$refs.li1.children;
let sum = 0;
for (var i = 0; i < wrap1.length; i++) {
sum += wrap1[i].offsetWidth;
}
return sum + wrap1.length * 16 * 2;
},
//获取竖轴每个模块的高度
height() {
let wrap2 = this.$refs.li2.children;
let height = 0;
this.listHeight.push(height);
for (let i = 0; i < wrap2.length; i++) {
let item = wrap2[i];
height += item.clientHeight;
this.listHeight.push(height);
}
},
// 点击横轴滚动
select(index, event) {
// PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,
if (!event._constructed) {
return;
}
this.currentIndex = index; //改变点击的当前样式
this.menuIndexChange = false; //禁用竖轴滚动 防止横竖轴都改变index 解决运动时listenScroll依然监听的bug
//横纵向右偏移16
this._followScroll(index); //横轴动画移动
//竖轴滚到响应位置
let wrap2 = this.$refs.li2.children;
let el = wrap2[index];
this.wrapperScroll.scrollToElement(el, 300);
//竖轴滚动结束后在允许动画
this.wrapperScroll.on("scrollEnd", () => {
this.menuIndexChange = true;
});
},
// 横轴滚动到当前元素并向右移动16px
_followScroll(index) {
let wrap1 = this.$refs.li1.children;
let el = wrap1[index];
if (index < wrap1.length / 2) {
this.scroll.scrollToElement(el, 300, -16, 0);
}
}
}
};
</script>
本人开发的微信小程序(已上线)、公众号及网站二维码:
有兴趣的可以进去看看或者动动你们勤劳的双手点个关注哟 作者在此谢谢大家了。
1、佩奇网(微信小程序):一个IT技术社区,对大家很有帮助的,都有超前的技术分享
2、江小鱼(公众号):一个分享程序人生或者经验哲理的公众号
3、网站:暂时还没想好放什么,不过后续想好会放上去