better-scroll制作横向滑动时间轴

首先，效果图是这样的
可以左右滑动每个小标也可以点

导入

npm install better-scroll --save 

想要更细节的
就去文档看看吧
http://ustbhuangyi.github.io/better-scroll/doc/api.html

代码
要注意的点就是外层DIV必须设置定宽然后 overflow: hidden;

<template>
     <div class="Ruler"  ref="wrapper">
            <div class="rulerBox">
                <div class="items" v-for="(item,i) in 40" :key="i" @click="showNum(i)">
                    <div class="item" :class="[val==i?'active':' ']"></div>
                    <div class="title" :class="[val==i?'activeFont':' ']">2019</div>
                </div>
            </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    export default {
        name:'Ruler',
        data() {
            return {
                val:0
            }
        },
        methods:{
            showNum(i){
                console.log(i)
                this.val=i
            }
        },
        mounted() {
        this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.wrapper, {
                scrollX: true,
                // eventPassthrough: 'vertical'
                })
            })
        }
    }
</script>

<style lang="less" scoped>
    .Ruler{
        width: 90%;
        height: 100%;
        margin: 0 auto;
        background: rgba(9,21,59,1);
        display: flex;
        align-items: center;
        padding: 0 20px;
        overflow: hidden;
    }
    .position-box{
        overflow: hidden;
    }
    .rulerBox{
        display: flex;
        align-items: flex-end;
    }
    
    .rulerBox .items:nth-child(5n+1) .item{
        height: 60px;
    }
    .rulerBox .items:nth-child(5n+1) .title{
        opacity: 1;
    }
    .items{
        margin-right: 20px;
        cursor: pointer;
    }
    .item{
        width: 10px;
        height: 30px;
        background: #106ef6;
        margin: 0 auto;
        border-radius: 3.5px;
    }
    .title{
        font-size: 12px;
        color: #106ef6;
        opacity: 0;
        margin-top: 5px;
    }
    .active{
        background: #01ffff;
        color: #01ffff;
    }
    .activeFont{
        color: #01ffff;
        font-size: 14px;
        opacity: 1;
    }
    
</style>