使用better-scroll实现tab横向滚动

前置条件

1 安装 nodejs，因为安装 better-scroll 需要使用 npm 命令；
2 安装 better-scroll 插件；

安装

npm install better-scroll --save-dev （项目内安装）

引入

import BScroll from 'better-scroll'  // 引入better-scroll插件

htm代码

    // 因为要设置父标签的宽度，这边通过ref获取
    <div class='tab-roll' ref="tabRoll"> // 父标签
        <div class='channel-tab' ref="channelTab"> //子标签
            <div class='channel-title' :class="currentTab===''?'channel-title-active':''" @click="changeTab('')">首页</div>
            <div v-for="channel in channelList" class='channel-title' @click="changeTab(channel.id)" :class="currentTab===channel.id?'channel-title-active':''">{{channel.title}}</div>
        </div>
    </div>

js代码

new Vue({
  el: '#app',
  mounted() {
    this.fetchData(1);
  },
  methods: {    
    // 伪代码，请求接口的发方法
    fetchData() {
      // 请求数据成功后，调用setScroll
      this.setScroll ();
    }
    // 设置tab横向滚动
    setScroll () {
      // 这边的channelList为请求接口后返回的数据
      let width = (this.channelList.length + 1 ) * 72 // 动态计算出滚动区域的大小，
      // 修改滚动区域的宽度，判断动态的宽度是否小于窗口的宽度
      if ($(window).width() > width) {
        this.$refs.channelTab.style.width = $(window).width() + 'px'
      } else {
        this.$refs.channelTab.style.width = width + 'px'
      }
      // 滚动设置写法
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.tabRoll, {
            startX: 0,  // 配置的详细信息请参考better-scroll的官方文档
            click: true,
            scrollX: true,
            scrollY: false,
            eventPassthrough: 'vertical'
          })
        } else {
          this.scroll.refresh() // 如果dom结构发生改变调用该方法
        }
      })
    }
  }
});

Options 参数
startX: 0 开始的X轴位置
startY: 0 开始的Y轴位置
scrollY: true 滚动方向为 Y 轴
scrollX: true 滚动方向为 X 轴
click: true 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用_constructed，若是bs派发的则为true
directionLockThreshold: 5
momentum: true 当快速滑动时是否开启滑动惯性
bounce: true 是否启用回弹动画效果
selectedIndex: 0 wheel 为 true 时有效，表示被选中的 wheel 索引
rotate: 25 wheel 为 true 时有效，表示被选中的 wheel 每一层的旋转角度
wheel: false 该属性是给 picker 组件使用的，普通的列表滚动不需要配置
snap: false 该属性是给 slider 组件使用的，普通的列表滚动不需要配置
snapLoop: false 是否可以无缝循环轮播
snapThreshold: 0.1 用手指滑动时页面可切换的阈值，大于这个阈值可以滑动的下一页
snapSpeed: 400, 轮播图切换的动画时间
swipeTime: 2500 swipe 持续时间
bounceTime: 700 弹力动画持续的毫秒数
adjustTime: 400 wheel 为 true 有用，调整停留位置的时间
swipeBounceTime: 1200 swipe 回弹 时间
deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
momentumLimitTime: 300 符合惯性拖动的最大时间
momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
preventDefault: true 是否阻止默认事件
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
HWCompositing: true 是否启用硬件加速
useTransition: true 是否使用CSS3的Transition属性
useTransform: true 是否使用CSS3的Transform属性
probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件

css

.tab-roll {
  position: fixed;
  top: 50px;
  left: 0;
  font-size: 14px;
  clear: inherit;
  height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 1px 10px #DEDEDE;
  background: #fff;
  overflow:hidden;
  z-index: 5;
}
.channel-title {
  float: left;
  position: relative;
  padding: 0 10px;
  width: 48px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  color: #333;
}
.channel-title-active{
  position: relative;
  font-weight: bold;
  &:after{
    content:'';
    position: absolute;
    left:35%;
    bottom: 5px;
    width: 30%;
    height: 3px;
    background: #f4403f;
  }
}