iview BackTop 返回頂部 組件無效解決

通過查找博客,此組件需要固定的高度才能使用,而筆者的頁面主內容顯示區域高度是通過calc(~'100vh - 140px');計算得來,故無法使用,最終只得自己實現返回頂部方法,代碼如下:

頁面布局結構:

<Layout>
    <Header>
    </Header>

    <Layout>
        <Sider>
        </Sider>

        <Layout class="index-main" ref="layoutmain">
        <!--主內容區域,即滾動條出現區域-->
        <Content class="content" ref="indexcontent">
        
        </Content>
          <Footer class="con-foot">2011-2020 &copy;
          <BackTop @on-click="toTop(30)"></BackTop><!--返回頂部組件,只使用原來的樣式,方法重寫-->
        </Layout>

      </Layout>
</Layout>

返回頂部方法:

<script>

export default {
  name: 'index',
  mounted() {
    let div = this.$refs.layoutmain.$el;
    div.addEventListener('scroll', this.handleScroll);//監聽滾動條
    
  },
    methods: {
    handleScroll (e) {
      let div = this.$refs.layoutmain.$el;
      let backDiv= document.querySelector('.ivu-back-top');
      if (div.scrollTop > 100) {//大於滾動距離顯示返回頂部圖標
        
        backDiv.style.display = 'block';
      } else {
        
        backDiv.style.display = 'none';
      }
    },
    toTop(step=40){

      //參數step表示時間間隔的幅度大小，以此來控制速度
      //當回到頁面頂部的時候需要將定時器清除
      let div = this.$refs.layoutmain.$el;
      div.scrollTop-=step;
      if (div.scrollTop>0) {
          var time=setTimeout(()=>this.toTop(step),15);
      }else {
          clearTimeout(time);
      }
    }
};
</script>