下载 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 结构发生变化的时确保滚动效果正常}})}},mounted() {this.initScroll()}
}
</script>

在组件的CSS中（stylus 语法）

<style lang="stylus" scoped>
.wrapperwidth 100%position absolutetop 0bottom 0overflow hidden
</style>

二、 水平滚动
在组件模板template中布局

<template><div class="wrapper" ref="wrapper"><ul ref="content" class='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) - 10this.$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 结构发生变化的时确保滚动效果正常}})}},mounted() {this.initScroll()}
}
</script>

在组件的CSS中（stylus 语法）

<style lang="stylus" scoped>
.wrapperwidth 100%overflow hidden.contentwhite-space nowrap.itemfloat leftwidth 60px
</style>

better-scroll