鍍金池/ 問答/HTML/ better scroll 橫向滾動為何沒有作用

better scroll 橫向滾動為何沒有作用

<div class="tab" ref="tab">
    <div class="tab_content">
        <div class="tab_item" v-for="item in TabList">
            {{item.name}}
        </div>
    </div>
</div>
InitTabScroll(){
    this.$nextTick(()=>{
        if (!this.scroll) {
                this.scroll=new BScroll(this.$refs.tab, {
                    startX:0,
                    click:true,
                    scrollX:true,
                    eventPassthrough:'vertical'
                })
        }else{
               this.scroll.refresh()
        }
    })
}
.tab{
    width: 10.0rem;
    height: 1.333333rem;
    overflow: hidden;
}
.tab_item{
    display: inline-block;
    height: 1.333333rem;
    line-height: 1.333333rem;
    padding: 0 0.466667rem;
}

請問是我樣式寫錯了么？還是better-scroll配置錯了

回答
編輯回答
懷中人

你好，我想問一下，縱向的時候可以外部元素高度一定，內(nèi)部高度可以直接使用html和css撐開，超過外部元素實(shí)現(xiàn)滾動，而橫向很多張商家圖片長度其實(shí)已經(jīng)超過了外部元素，為什么一定要使用js去規(guī)定長度，不能自己撐開

2018年3月23日 00:10
編輯回答
臭榴蓮

來波自問自答，tab_content的寬度應(yīng)該由js來控制，讓它橫向滾動一定要讓tab_content超出tab的寬度，所以要用js來設(shè)定tab_content的寬，

<div class="tab" ref="tab">
            <div class="tab_content" ref="tabcontent">
                <div class="tab_item" v-for="item in TabList" ref="tabitem">
                    {{item.name}}
                </div>
            </div>
        </div>
            InitTabScroll(){
                let width=0
                for (let  i = 0; i <this.TabList.length; i++) {
                    width+=this.$refs.tabitem[0].getBoundingClientRect().width
                }

                this.$refs.tabcontent.style.width=width+'px'
                this.$nextTick(()=>{
                    if (!this.scroll) {
                        this.scroll=new BScroll(this.$refs.tab, {
                            startX:0,
                            click:true,
                            scrollX:true,
                            scrollY:false,
                            eventPassthrough:'vertical'
                        })
                    }else{
                        this.scroll.refresh()
                    }
                })
            }
.tab{
    width: 10.0rem;
    height: 1.333333rem;
    overflow: hidden;
}
.tab_content{
    height: 1.333333rem;
    /*width: auto;*/
    /*overflow-y: hidden;*/
}
.tab_item{
    display: inline-block;
    height: 1.333333rem;
    line-height: 1.333333rem;
    padding: 0 0.466667rem;
}
2017年7月12日 17:37