在vue中使用better-scroll,实现横向滚动

1.安装better-scroll插件

npm install better-scroll --save

2.在需要使用的vue页面中引入better-scroll,并初始化better-scroll类

<script>
import BScroll from 'better-scroll';
export default {
    data(){
      return{

      }
    },
  created() {
    this.$nextTick(() => {
    if (!this.scroll) {
	     this.scroll = new BScroll(this.$refs.wrapperBox, {
           scrollX: true,
           eventPassthrough: 'vertical'
       })

    }
    })
  }
}
</script>

3.在template里面添加ref,获取需要滚动的dom

<div class="wrapper" ref="wrapperBox">
  	<ul class="content">
  		 <li></li>
  		 <li></li>
  		 <li></li>
  		 <li></li>
  		 <li></li>
  		 <li></li>
  	</ul>
 </div>

4.css样式写法注意事项
.wrapper应该固定宽高
.wrapper类一般要加上overflow:hidden
.content的宽度一定要大于.wrapper
注意:真正移动的是content这个dom.

你可能感兴趣的:(vue)