better-scroll x轴滚动事件

首先获取需要滚动的数组数据

建一个关于滑动内容的template 类；设置 template 类中的对应div的ref（最外层实例化better-scroll，最里面的宽度之和叠加成中间div宽度）；

设置div样式；

实例化对象（ps：本地数据可以直接在created中实例化；异步加载数据需要在获取数据渲染完毕再去实例化）

各步骤代码如下（ps：该代码纯属复制他人代码，如有侵权请联系）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>小熊正点</title>
    <script src="../3th/jquery-3.1.1.min.js"></script>
  
    <style>
        .tab {
            width: 100%;
            overflow: hidden;
            padding: 5px;
        }
        .tab_content {
            line-height: 1rem;
            display: flex;
        }
        .tab_item{
            flex: 0 0 60px;
            width:60px;
            text-align: center;
        }


    </style>
</head>

<body>
<div id="app" v-cloak>
    <template>
        <div class="tab" ref="tab">
            <ul class="tab_content" ref="tabWrapper">
                <li class="tab_item" v-for="(item,index) in itemList" ref="tabitem"  @click="change(index)">
                    {{item.title}}
                </li>
            </ul>
        </div>
    </template>


</div>
</body>

<script src="../3th/vue.js"></script>
<script src="../3th/better-scroll.js" ></script>
<script>
    var Main = {
        data() {
            return{
                itemList:[
                    {
                        'title':'关注'
                    },
                    {
                        'title':'推荐'
                    },
                    {
                        'title':'深圳'
                    },
                    {
                        'title':'视频'
                    },
                    {
                        'title':'音乐'
                    },
                    {
                        'title':'热点'
                    },
                    {
                        'title':'新时代'
                    },
                    {
                        'title':'娱乐'
                    },
                    {
                        'title':'头条号'
                    },
                    {
                        'title':'问答'
                    },
                    {
                        'title':'图片'
                    },
                    {
                        'title':'科技'
                    },
                    {
                        'title':'体育'
                    },
                    {
                        'title':'财经'
                    },
                    {
                        'title':'军事'
                    },
                    {
                        'title':'国际'
                    }
                ]
            }
        },
        created() {
            this.$nextTick(() => {
                this.InitTabScroll();
            });
        },
        methods: {

            InitTabScroll() {
                let width = 0
                debugger
                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,
                            probeType:3,
                            eventPassthrough: 'vertical'
                        });
                        this.scroll.on('scroll',(pos)=>{
                            this.scrollY = Math.abs(Math.round(pos.y));
                 
                        });

                    } else {
                        this.scroll.refresh()


                    }

                });

            },
            change(index){
                let pointX = this.scroll.pointX;
                let width = $('body').width();
                this.scroll.scrollTo(-300,0,300);
                if(width - pointX <60){
                }

            }

        }

    }
    var Ctor = Vue.extend(Main)
    var app = new Ctor().$mount('#app')
</script>
</html>

better-scroll x轴滚动事件

猜你喜欢