首先,什么是 better-scroll ?它是用来干什么的?
better-scroll 是一个移动端 滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
那么,我们要在 vue 中如何使用它:
安装:
npm install @better-scroll/core --save
// or
yarn add @better-scroll/core
引入:
// 最基本的使用,你只需要在使用到的页面中引入即可
import BScroll from '@better-scroll/core'
使用:
// 如果你只是用来实现一个最基本的滚动列表,如
import BScroll from '@better-scroll/core'
let bs = new BScroll('.wrapper', {
// ...... see options
})
Demo:
// js
data() {
return {
scroll: ''
};
},
methods: {
// 滑动
personScroll() {
// $nextTick 是一个异步函数,为了确保 DOM 已经渲染
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.personWrap, {
startX: 0, // 初始化水平方向的位置
scrollX: true, // 设置为 true,将启用水平滚动
scrollY: false, // 同scrollX
// 要覆盖本机滚动,BetterScroll 必须禁止某些默认浏览器行为,例如鼠标单击。
// 如果您希望您的应用程序响应单击事件,则必须将此选项显式设置为true
click: true,
// 忽略竖直方向的滚动
// 保留原生垂直滚动,添加水平BetterScroll,将此设置为“vertical”
// 则 BetterScroll 区域将仅对水平滑动做出反应。垂直滑动会自然滚动整个页面
// 同理,当您想要保持自然的水平滚动时,将其设置为 “horizontal”
eventPassthrough: "vertical"
});
} else {
// refresh better-scroll API
// 有个时候,滚动区域的内容并不是写死的,会发生变化,
// 当DOM结构发生改变时应重新计算 BetterScroll 以确保滚动正常工作。
this.scroll.refresh();
}
});
}
},
created() {
this.$nextTick(() => {
// refresh better-scroll API
// 有个时候,滚动区域的内容并不是写死的,会发生变化,
// 当DOM结构发生改变时应重新计算 BetterScroll 以确保滚动正常工作。
this.personScroll();
})
},
<!-- DOM结构 -->
<div class="scroll-wrapper" ref="personWrap"><!-- BScroll构造函数传入的盒子元素 -->
<ul class="scroll-content"><!-- 内层盒子元素,必须为inline-block -->
<li v-for="item in freshRunList" :key="item.id" @click="toFreshRun(item)">
<!-- 内容区 -->
</li>
</ul>
</div>
警告:BetterScroll 实现了水平滚动,对 CSS 要求更高。首先,您需要确保包装器不包装,并且内容的显示是内联块。
即编写 css 样式应注意:
.scroll-wrapper {
// ...
white-space nowrap;
}
.scroll-content {
// ...
display inline-block;
}
只有正确的配置css样式,才能保证 滚动 生效。
下来便开始编写你的 Better-scroll 吧。推荐大家 插件作者的文章 当 better-scroll 遇见 Vue。
不太懂的同学可以学习学习。