29.vue解决fixed定位出现问题

在vue中使用fixed定位在进入二级界面时会出现元素定位抖动的问题，在这里采用absolute布局来替换fixed布局

  <div id="cartTab" class="footerbar" ref="screenHeight">
      <mu-button class="addcartbtn" color="primary">
        加入购物车
      </mu-button>
    </div>

获取屏幕高度

    let screenH = document.documentElement.clientHeight
    // 60px
    let tabH = this.$refs.screenHeight.offsetHeight

    // console.log(self.clientHeight);
    window.onresize = function temp () {
      screenH = document.documentElement.clientHeight
    }

在这里不需要注意输出是否带px，不然加减的时候没有效果

//获取高度值
var height= this.$refs.text.offsetHeight; //100

//获取元素样式值,element 为元素ref="element"
var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px

//获取元素内联样式值
var heightStyle =this.$refs.element.style.height; // 100px

在这里采用当前屏幕高度-底部导航高度根据app顶部来做偏移实现fixed定位的效果

    //  获取浏览器可视区域高度    1334
    let screenH = document.documentElement.clientHeight
    // 60px
    let tabH = this.$refs.screenHeight.offsetHeight

    // console.log(self.clientHeight);
    window.onresize = function temp () {
      screenH = document.documentElement.clientHeight
    }

//修改元素定位
    this.$refs.screenHeight.style.top = screenH - tabH + 'px'