vue中使用better-scroll实现滑动

下载 better-scroll

npm install better-scroll--save

注意：

• 必须包含两个大的div，外层和内层div
• 外层div设置可视的大小(宽或者高)-有限制宽或高
• 内层div，包裹整个可以滚动的部分
• 内层div高度一定大于外层div的宽或高(宽度大于外层是水平滚动, 高度大于外层是垂直滚动)，才能滚动
• 必须在获取数据和DOM渲染完之后再调用定义的 initScroll()方法，否则无法滚动
  在组件script标签中引入

<script>import BScrollfrom'better-scroll'exportdefault{data(){return{
	  goods:[]}}}</script>

一、 垂直滚动
在组件模板template中布局

<template><divclass="wrapper"ref="wrapper"><ul><liv-for="item in goods"class="item"><spanclass="text">
          {{item.name}}</span></li></ul></div></template>

在组件钩子函数methods中定义方法

<script>exportdefault{data(){return{
	  goods:[]}},
  methods:{initScroll(){this.$nextTick(()=>{if(!this.Scroll){this.Scroll=newBScroll(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><divclass="wrapper"ref="wrapper"><ulref="content"class='content'><liv-for="item in goods"class="item"><spanclass="text">
          {{item.name}}</span></li></ul></div></template>

在组件钩子函数methods中定义方法（略有不同）

<script>exportdefault{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=newBScroll(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>

better-scroll