tab横向滚动

方法使用:

import BScroll from 'better-scroll';

1. 引入 import BScroll from ‘better-scroll’; 横向滑动
2. html 一共有三层
   例:

<div ref="tab" class="tab">
            <ul class="ulTab" ref="tabWrapper">
                <li v-for="item in itemList" ref="tabitem" :key="item.id" @click="toggle(item.id)" :class="{red: item.id===active}">
                    {{item.title}}
                </li>
            </ul>
        </div>

3.css
例"

.tab {
            margin-bottom: 15px;
            background: #fff;
            width: 100%;
            height: 40px;
            overflow: hidden;
            /* border-bottom: 1px solid #ccc; */
            top: 52px !important;
            margin-bottom: 15px;
            .ulTab {
                height: 100%;
                display: flex;
                line-height: 2rem;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #ccc;
                overflow: hidden;
                height: 100%;
                li {
                    height: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: none;
                    width: 90px;
                    /* height: 36px; */
                    list-style: none;
                    font-size: 15px;
                    border-left: 1px solid #ccc;
                }
            }
        }"

4.methods:
例:

InitTabScroll() {
                let width = 0
                for (let i = 0; i < this.itemList.length; i++) {
                    width += this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect() 返回元素的大小及其相对于视口的位置
                }
                this.$refs.tabWrapper.style.width = width + 'px';
                this.$nextTick(() => {
                    if (!this.scroll) {
                        this.scroll = new BScroll(this.$refs.tab, {
                            startX: 0,
                            click: true,
                            scrollX: true,
                            scrollY: false,
                            bounce: false,
                            eventPassthrough: 'vertical'
                        });
                    } else {
                        this.scroll.refresh()
                    }
                });
            },

5. mounted
   例:

this.$nextTick(() => {
                this.InitTabScroll();
            });
            ```