Vue中利用better-scroll组件实现横向滚动功能
About
最近在学习vue的过程中，仿照去哪儿网的移动端写了个小项目，旨在实践和巩固基础知识，但是今天发现去哪儿的首页上有一个组件用户体验较差，即一个横向列表使用浏览器的原生滚动实现，列表滚动起来较为生涩，很难受，于是乎决定由better-scroll重写这个组件。
better-scroll介绍
better-scroll是黄轶大神（没错，我学长）写的基于i-scroll的一个滚动组件，项目地址：https://github.com/ustbhuangyi/better-scroll
一、滚动的实现原理
better-scroll的滚动原理和浏览器原生滚动原理是一样的，当子盒子的高度大于父盒子的高度，就会出现纵向滚动：
同理，如果子盒子的宽度大于父盒子的宽度，那么就会出现横向滚动 ( 根本原理 )。
二、在Vue中使用better-scroll
在Vue中使用better-scroll最需要注意的点就是必须等到页面渲染完成再去执行BScroll的实例化，因为better-scroll必须要得到滚动区域的尺寸和父盒子的尺寸，来计算出是否能滚动，所以我们必须要对Vue的生命周期有一定的了解。
这里是一个小demo，通过这个demo你将会了解到如何使用better-scroll
<template>
<div class="wrapper" ref="wrapper"> // 在vue中获取dom元素最简便的方法就是利用 this.$refs
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll' //导入better-scroll
export default {
mounted() {
this.$nextTick(() => { // 使用 this.$nextTick 为了确保组件已经渲染完毕
this.scroll = new Bscroll(this.$refs.wrapper, {}) // 实例化BScroll接受两个参数，第一个为父盒子的dom节点
})
}
}
</script>
三、在Vue中实现横向滚动
1. 效果图对比
使用原生滚动：
使用better-scroll:
2. 代码（请看注释）
<template>
<div class="recommand-wrap">
<div class="title">
<img class="title-img" class="lazy" data-src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="本周热门榜单">
<span class="title-hotrec">本周热门榜单</span>
<span class="title-allrec">全部榜单</span>
</div>
<div ref="wrapper">
<ul class="cont" ref="cont">
<li class="cont-item" v-for="item of recommendList" :key="item.id">
<div class="cont-img">
<img class="img" :class="lazy" data-src="item.url" :alt="item.text">
</div>
<div class="cont-dest">{{item.text}}</div>
<div class="cont-price">
<span class="price">￥{{item.price}}</span>
<span>起</span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'HomeRecommand',
props: {
recommendList: {
type: Array,
required: true
}
},
components: {
},
data () {
return {
}
},
methods: {
verScroll () {
let width = this.recommendList.length * 110// 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
this.$refs.cont.style.width = width + 'px' // 修改滚动区域的宽度
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {
startX: 0, // 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: 'vertical'
})
} else {
this.scroll.refresh() //如果dom结构发生改变调用该方法
}
})
}
},
mounted () {
this.$nextTick(() => {
let timer = setTimeout(() => { // 其实我也不想写这个定时器的，这相当于又嵌套了一层$nextTick，但是不这么写会失败
if (timer) {
clearTimeout(timer)
this.verScroll()
}
}, 0)
})
}
}
</script>
<style lang="scss" scoped>
.recommand-wrap {
height: 0;
padding-bottom: 50%;
margin-top: .2rem;
background: #fff;
padding-left: .24rem;
width: 100%;
.title {
position: relative;
height: 40px;
display: flex;
padding: 12px 0;
box-sizing: border-box;
.title-img {
width: 15px;
height: 15px;
}
.title-hotrec {
font-size: 16px;
margin-left: 4px;
}
.title-allrec {
position: absolute;
padding-top: 2px;
font-size: 13px;
right: 20px;
color: gray;
}
}
.cont {
list-style: none;
// overflow-x: scroll;
white-space: nowrap;
font-size: 12px;
text-align: center;
padding-right: .24rem;
.cont-item {
position: relative;
display: inline-block;
padding: .06rem 0 .2rem;
width: 2rem;
margin: 0 .1rem;
.cont-img {
overflow: hidden;
width: 2rem;
height: 0;
padding-bottom: 100%;
.img {
width: 100%;
}
}
.cont-dest {
margin: .1rem 0;
}
.cont-price {
.price {
color: #ff8300;
}
}
}
}
}
</style>
参考链接
作者：黄轶
链接：https://zhuanlan.zhihu.com/p/27407024
总结
到此这篇关于Vue中利用better-scroll组件实现横向滚动的文章就介绍到这了,更多相关Vue better-scroll横向滚动内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
