下载 better-scroll
npm install better-scroll --save
注意:
- 必须包含两个大的div,外层和内层div
- 外层div设置可视的大小(宽或者高)-有限制宽或高
- 内层div,包裹整个可以滚动的部分
- 内层div高度一定大于外层div的宽或高,才能滚动
- 必须在获取数据和DOM渲染完之后再调用定义的 initScroll()方法,否则无法滚动
在组件script标签中引入
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
goods: []
}
}
}
</script>
一、 垂直滚动
在组件模板template中布局
<template>
<div class="wrapper" ref="wrapper">
<ul>
<li v-for="item in goods" class="item">
<span class="text">
{{item.name}}
</span>
</li>
</ul>
</div>
</template>
在组件钩子函数methods中定义方法
<script>
export default {
data() {
return {
goods: []
}
},
methods: {
initScroll() {
this.$nextTick(()=>{
if(!this.Scroll) {
this.Scroll = new BScroll(this.$refs.wrapper,{
click: true, // 配置允许点击事件
scrollY: true // 开启纵向滚动
})
} else {
this.Scroll.refresh() // 重新计算 better-scroll,当 DOM 结构发生变化的时确保滚动效果正常
}
})
}
}
}
</script>
在组件的CSS中(stylus 语法)
<style lang="stylus" scoped>
.wrapper
width 100%
position absolute
top 0
bottom 0
overflow hidden
</style>
二、 水平滚动
在组件模板template中布局
<template>
<div class="wrapper" ref="wrapper">
<ul ref="content">
<li v-for="item in goods" class="item">
<span class="text">
{{item.name}}
</span>
</li>
</ul>
</div>
</template>
在组件钩子函数methods中定义方法(略有不同)
<script>
export default {
data() {
return {
goods: []
}
},
methods: {
initScroll() {
// 给内层盒子设置宽度,不设置宽度的话无法滚动
let width = this.goods.length * 60
// 如果有外边距,可以这样写。需要去掉最后一个元素的外边距,在后面减一下
// let width = this.goodslength * (60 + 10) - 10
this.$refs.content.style.width = width + 'px'
this.$nextTick(()=>{
if(!this.Scroll) {
this.Scroll = new BScroll(this.$refs.wrapper,{
click: true, // 配置允许点击事件
scrollX: true, // 开启横向滚动
eventPassthrough: 'vertical' // 当设置 eventPassthrough 为 'vertical' 的时候,scrollY 无效
})
} else {
this.Scroll.refresh() // 重新计算 better-scroll,当 DOM 结构发生变化的时确保滚动效果正常
}
})
}
}
}
</script>
在组件的CSS中(stylus 语法)
<style lang="stylus" scoped>
.wrapper
width 100%
overflow hidden
.content
white-space nowrap
.item
float left
width 60px
</style>