better-scroll实现横向和纵向双向滚动
程序员文章站
2024-01-09 19:59:46
因项目需要，要实现横向和纵向双向滚动的功能，自己手写了一个结果ios和android不兼容。。。后来发现大神的better-scroll可以实现，但也是频频踩坑，这几个配置间有冲突，搞不好还不能实现双向滚动，结果要加班，哈哈那接下来就总结一下我实践成功的方法，先看效果图开始讲解环境和版本这个是在vue中自己封装的组件"vue": "^2.5.2","better-scroll": "^1.15.2",组件
&l...
因项目需要，要实现横向和纵向双向滚动的功能，自己手写了一个结果ios和android不兼容。。。
后来发现大神的better-scroll可以实现，但也是频频踩坑，这几个配置间有冲突，搞不好还不能实现双向滚动，结果要加班，哈哈
那接下来就总结一下我实践成功的方法，先看效果图
开始讲解
环境和版本
这个是在vue中自己封装的组件
"vue": "^2.5.2",
"better-scroll": "^1.15.2",
组件
<template>
<div>
<div class="person-wrap" ref="personWrap">
<ul class="person-list" ref="personTab">
<li class="person-item">1</li>
<li class="person-item">2</li>
<li class="person-item">3</li>
<li class="person-item">4</li>
<li class="person-item">5</li>
</ul>
</div>
</div>
</template>
核心js
<script>
import BScroll from "better-scroll";
export default {
components: {BScroll},
data() {
return {};
},
mounted(){
this.$nextTick(() => {
this.personScroll();
});
},
methods: {
personScroll() {
// 默认有六个li子元素，每个子元素的宽度为120px
let width = 6 * 120;
this.$refs.personTab.style.width = width + "px";
// this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.personWrap, {
startX: 0,
click: true,
// 划重点：核心所在，只写 scrollX， eventPassthrough就行了，写多了会冲突
scrollX: true,
eventPassthrough: "vertical"
});
} else {
this.scroll.refresh();
}
});
}
}
};
</script>
样式: 用的是stylus，用之前请安装stylus,否则会报错哈，具体安装使用就不介绍了
<style lang="stylus" scoped>
.person-wrap{
width 98%
border 1px solid #333
padding 10px 0
box-sizing: border-box
overflow hidden
margin auto
}
.person-list{
display flex
}
.person-item{
flex 1
width 120px
line-height 100px
margin 10px
border 1px solid #333
text-align center
}
</style>
这个组件也可以当页面之间运行，重点说一下
eventPassthrough 的值是’vertical’,而不是 ‘horizontal’。
freeScroll、scrollX、eventPassthrough（horizontal）都是支持横向滚动，但是彼此之间会互斥。
所以只要设置这两个就行了： scrollX: true, eventPassthrough: “vertical”
好了，到此总结完毕，如果帮你出坑了，请点个赞哈
本文地址：https://blog.csdn.net/u012570307/article/details/107540273