为什么element的el-backtop会不管用,来看这里

28 篇文章 1 订阅
6 篇文章 0 订阅
<template>
  Scroll down to see the bottom-right button.
  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

把target指向你要产生“回到顶部”按钮的组件,
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!
这个组件一定要是产生滚动条的组件!

举个栗子,App.vue中的栗子

<template>
  <div id="app" class="wrapper" style="height:520px;overflow: auto;">
    <div class="wrapper-content" style="height:2020px;background-color:aliceblue;text-align:center;position:relative;">
      <!-- 回到顶部 -->
      <template>
        <el-backtop target=".wrapper-content"></el-backtop>
      </template>

      <div>顶部</div>
      <div style="position:absolute;bottom:0;left:49%;">底部</div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
html,body,#app {
  height: 100%;
}
</style>

这样是不会产生按钮的,因为wrapper-content组件不会产生滚动条,更不会有滚动事件,要把target改成 target=“.wrapper”,因为真正产生滚动事件的是wrapper。

注意这句样式:

 <div id="app" class="wrapper" style="height:520px;overflow: auto;">

要给父组件overflow: auto,和高度,否则父组件会被自动撑开,不产生滚动事件(如果有滚动条那也是上级的,如果上级一直没有设置height那就是window的);把520px设置为100%也是没有用的,可以用document.body.offsetHeight这个方法设置适合屏幕的高度;若不想设置具体高度则加上下面这句样式,把上级高度全部100%也是管用的

html,body,#app {height: 100%;}

附上官网介绍
在这里插入图片描述

  • target最好用id,因为唯一
  • template必不可少
  • 使用target以外的属性时一定要用冒号(v-bind),因为它接收的是数字,不用冒号只能传字符串,如
<el-backtop target=".wrapper" :visibility-height="200" :right="40" :bottom="40"></el-backtop>
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值