项目之nav导航条

比如要这样动态获取这个导航条的长度

<div class="hot-content-bottom">
            <div class="hot-bottom-inner" :style="innerBarStyle"></div>  //我是导航条，我的背景长度是100px
        </div>

然后在data里面定义一些这样的数据

data(){
            return{
                //屏幕的宽度
                screenW:window.innerWidth || document.documentElement.clientWidth || doucument.body.clientWidth,
                  //这是获取屏幕的宽度  为了适应各种浏览器
                //滚动内容的宽度
                scrollContentW:720,

                //滚动背景条的长度
                bgBarW:100,

                //滚动条长度
                barXWidth:0,
}

然后我们要定义一个方法去计算导航条的长度
方法就是用屏幕的宽度比上可视区域的宽度 等于背景条的长度比上滚动条的长度

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

接下来调用这个方法在项目初始化的时候调用即可

 mounted(){
            this.getBottomBarWidth();

然后在滚动条那绑定一个动态的滚动条宽度属性
动态监听屏幕宽度已经可视宽度的变化 以此来改变滚动条的长度
所以计算属性就应该这样写

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