iview BackTop 返回顶部 组件无效解决

通过查找博客,此组件需要固定的高度才能使用,而笔者的页面主内容显示区域高度是通过calc(~'100vh - 140px');计算得来,故无法使用,最终只得自己实现返回顶部方法,代码如下:

页面布局结构:

 1 <Layout>
 2     <Header>
 3     </Header>
 4 
 5     <Layout>
 6         <Sider>
 7         </Sider>
 8 
 9         <Layout class="index-main" ref="layoutmain">
10         <!--主内容区域,即滚动条出现区域-->
11         <Content class="content" ref="indexcontent">
12         
13         </Content>
14           <Footer class="con-foot">2011-2020 &copy;
15           <BackTop @on-click="toTop(30)"></BackTop><!--返回顶部组件,只使用原来的样式,方法重写-->
16         </Layout>
17 
18       </Layout>
19 </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>

 

posted @ 2020-06-22 10:02  dirgo  阅读(1817)  评论(0)  编辑  收藏  举报