比如要這樣動(dòng)態(tài)獲取這個(gè)導(dǎo)航條的長(zhǎng)度

<div class="hot-content-bottom">
            <div class="hot-bottom-inner" :style="innerBarStyle"></div>  //我是導(dǎo)航條，我的背景長(zhǎng)度是100px
        </div>

然后在data里面定義一些這樣的數(shù)據(jù)

data(){
            return{
                //屏幕的寬度
                screenW:window.innerWidth || document.documentElement.clientWidth || doucument.body.clientWidth,
                  //這是獲取屏幕的寬度  為了適應(yīng)各種瀏覽器
                //滾動(dòng)內(nèi)容的寬度
                scrollContentW:720,

                //滾動(dòng)背景條的長(zhǎng)度
                bgBarW:100,

                //滾動(dòng)條長(zhǎng)度
                barXWidth:0,
}

然后我們要定義一個(gè)方法去計(jì)算導(dǎo)航條的長(zhǎng)度
方法就是用屏幕的寬度比上可視區(qū)域的寬度 等于背景條的長(zhǎng)度比上滾動(dòng)條的長(zhǎng)度

methods:{
            getBottomBarWidth(){
                this.barXWidth = this.bgBarW * (this.screenW/this.scrollContentW)
            }

接下來(lái)調(diào)用這個(gè)方法在項(xiàng)目初始化的時(shí)候調(diào)用即可

 mounted(){
            this.getBottomBarWidth();

然后在滾動(dòng)條那綁定一個(gè)動(dòng)態(tài)的滾動(dòng)條寬度屬性
動(dòng)態(tài)監(jiān)聽(tīng)屏幕寬度已經(jīng)可視寬度的變化 以此來(lái)改變滾動(dòng)條的長(zhǎng)度
所以計(jì)算屬性就應(yīng)該這樣寫

computed:{
            innerBarStyle(){
                return{
                    width:`${this.barXWidth}px`,
}