比如要这样动态获取这个导航条的长度
<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`,
}
