element UI 中的返回顶部组件没效果

最新推荐文章于 2022-10-15 14:05:02 发布
最新推荐文章于 2022-10-15 14:05:02 发布
阅读量1k 收藏 4
点赞数 6
文章标签： js javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45155318/article/details/106573982
版权

element UI 中的返回顶部组件没效果

官网提供：

<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>

但是有些会发现它并不会起作用
只需要把它改成：

<el-backtop :visibility-height="60">
  <i class="el-icon-caret-top"></i>
</el-backtop>

并且把它放到第一个div下面就行。

进击的派大星
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element 回到顶部组件使用注意事项 （Backtop 回到顶部）
学而时习之，不亦说乎。
08-23 1171
前言 官网里面这个Backtop 回到顶部组件使用写的很简单，就这样 我们实际上使用这个组件，target对象是内容滚动的外部容器，并且这个容器的高度是100%是撑满整个屏幕的，写了个具体demo例子如下： <template> <!-- 外部容器 --> <div class="back-top-container"> <!-- 实际滚动内容 --> <div v-for="(item,i) in 150" :key="i"
Element Backtop回到顶部的具体使用
10-15
在Element UI中，`Backtop`组件是用于实现页面滚动到顶部功能的一个实用工具，尤其在用户滚动长页面时，能方便地将页面快速滚动回顶部。 **基础用法** `Backtop`组件的基础用法相当简单。在你的Vue模板中，你可以像...
element-ui的返回顶部组件无效
weixin_47813845的博客
11-18 679
今天在做项目中的时候，要加一个返回顶部的功能。因为项目中用到了饿了么的组件，所以就直接引用了Backtop这个组件。 我们在app.vue中写如下代码即可： <template> <div id="app"> <router-view /> <el-backtop target="#app" :bottom="100" :visibility-height="300"> <i class="el-icon-car
使用 element ui官网 回到顶部不显示问题解决
qq_44803640的博客
05-30 770
官网使用element ui 回到顶部解决使用之前（这种情况下根本不显示效果）修改之后完结 使用element ui 的回到顶部插件的时候出现不显示，功能不能使用的情况下写出这篇文章， 使用之前（这种情况下根本不显示效果） <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="10
Element-ui 回到顶部组件不显示问题解决
chenjun1992的博客
06-06 2634
Element-ui官网自定义回到顶部插件内容如下，但是复制到自己的代码里没有显示。 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100"> <div style="{ height: 100%; width
vue-element-ul中回到顶部功能不生效问题和快捷实现方法
seeeeeeeeeee的博客
06-18 605
element-ul原版本的代码 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 直接copy不生效，可以换成这样 <el-backtop :visibility-height="60">
element-ui 实现响应式导航栏的示例代码
10-15
在本文中，我们将深入探讨如何使用Element UI框架实现响应式导航栏。Element UI 是一个基于 Vue.js 的组件库，提供了丰富的UI元素，用于快速构建美观的前端界面。然而，它默认并不提供传统的顶部导航栏组件，因此...
Element PageHeader页头的使用方法
10-15
PageHeader 是 Element UI 中的一个组件，主要用于创建页面头部，它提供了导航、返回、标题显示等功能，有助于提升用户体验和应用的视觉一致性。 在 Element UI 中，PageHeader 组件通常用于展示页面的主要标题，...
Element NavMenu导航菜单的使用方法
10-15
Element UI的NavMenu导航菜单是前端开发中常用的一个组件，尤其在构建Web应用的侧边栏或顶部导航时。这个组件提供了丰富的样式和交互功能，能够帮助开发者快速创建出美观且易于使用的导航结构。 首先，让我们了解...
Element Breadcrumb 面包屑的使用方法
10-15
在 Element UI 中，`Breadcrumb` 组件是用于实现面包屑导航的一种工具，它帮助用户理解当前页面在网站层级结构中的位置。本文将详细介绍如何使用 Element Breadcrumb 面包屑组件以及它的各项功能。 面包屑导航是一...
element ui 组件的库的Backtop用法，以及没有效果的问题
weixin_46174785的博客
08-05 1164
Backtop组件的基本用法： js代码 // 这个div标签叫作用是，滚动的到顶部的距离是以他基准，最好放到顶部 <div class='container'></div> <el-backtop target=".container" > <div class="toTop">Top</div> </el-backtop> css代码： .container { width: 100%; /
vue elementUI回到顶部组件无法显示问题
weixin_44277937的博客
07-06 794
将elementUI官方的回到顶部组件代码复制过去不显示,困扰了很久 最后发现将这块给去掉就可以显示了 target=".page-component__scroll .el-scrollbar__wrap" <el-backtop :bottom="100"> <div style="{ height: 100%; width: 100%; background-color: #f2
Element UI中的BackTop无法使用的解决方案
Jesus_z的博客
03-02 5708
问题描述 最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。 具体表现为：滚动页面后该返回顶部按钮组件并没有出现。 ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop 问题分析 在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的...
【Vue项目复习笔记】BackTop组件的封装和使用，显示与隐藏
qq_40992225的博客
08-05 595
如果在backtop这个组件里面监听点击的话不太好，因为我们是在滚动区域监听点击的，是滚动的区域回到顶部，意味着我们要拿到better-scroll滚动对象。组件是不能直接监听点击的，如果我们想要监听组件点击，我们需要做一件事情，必须要加上.native原生修饰符。在我们需要监听一个组件的原生事件时，必须要给对应的事件加上.native修饰符，才能进行监听。在我们的scroll组件中，下面一句代码，将位置信息发送出来了，我们就要在home组件里面接收。当然，在这之前，我们要在data中给它一个默认属性。..
el-backtop不起作用的解决办法
wmklalala的博客
02-16 6853
插入官网上的代码发现不起作用还会报错 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> 更改为以下代码即可 <el-backtop></el-backtop> ...
el-backtop关于 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题
zhaoz的博客
07-19 1138
element的官网提供了两种 但是我们复制到项目中会发现控制台报 target is not existed: .page-component__scroll .el-scrollbar__wrap的问题 这里以第二种为例： <el-backtop :bottom="10" :right="0"> <div style="{ height: 100%; width: 100%; border-radius: 50%; fo
element el-scrollbar 横向滚动条问题解决以及随后引发的下拉框问题修复
热门推荐
h18820956011的博客
08-06 1万+
在使用vue时，就会有使用到elementUI，之后就是不断的在入坑和天坑之间徘徊。 elementUI中有个隐藏的组件，就是滚动条-----<el-scrollbar></el-scrollbar> 可以参考elementUI的官网代码 这里用F12可以查看到 添加之后会有出现横向滚...
Element UI 修改el-scrollbar 里面的 el-scrollbar__wrap
W_21dqwe的博客
07-15 2637
Element UI 修改el-scrollbar 里面的 el-scrollbar__wrap 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条，请添加css（.el-scrollbar__wrap{overflow-x:hidden;}） 或者 直接在<el-scrollbar wrapStyle="overflow-x:hidden;"></el-scrollbar> 1. wrapStyle: {} |
《element-plus》el-scrollbar 横向滚动条隐藏解决方案
潜心
10-15 6322
新的项目使用Element-plus ui 库开发，说真的，有了这样一个库，我们的开发过程真的很愉悦，但是难免会有些场景会碰上，比如隐藏的横向滚动条。
elment-ui中的Backtop组件如何使用
最新发布
04-11
1. 在需要使用的页面中引入Backtop组件：import { Backtop } from 'element-ui'; 2. 在模板中使用Backtop组件： <!-- 其他页面内容 --> <backtop></backtop> 3. 可以通过props属性配置Backtop组件的一些...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值