vue中使用better-scroll实现滑动

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

在组件的CSS中（stylus 语法）

<style lang="stylus" scoped>
.wrapper
  width 100%
  overflow hidden
  .content
  	white-space nowrap
  	.item
  	  float left
      width 60px
</style>