ElementUI之backtop组件的使用

最新推荐文章于 2022-05-18 10:06:05 发布

weixin_48183807

最新推荐文章于 2022-05-18 10:06:05 发布

阅读量168

点赞数 1

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_48183807/article/details/121136024

版权

官方文档给出的例子不完全，只要添加上面这个就行

这里容器定义的500px 和我们下面这行代码绑定的:visibility-height="300"有一定的关系

但你div的height必须高于300或者设置成100%，其他target和样式可以不需要添加，也可以实现回到顶部。

第一次分享，有点...

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_48183807

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue+element-ui backtop组件使用

qq_35117063的博客

12-17

2207

element-ui中的backtop返回顶部组件的使用最近写的项目中用到了vue和element-ui实现前端页面，在最后写到返回顶部的时候，看到有自带的组件就直接使用了，但是在copy代码进去之后发现没生效。找了不少文章，有些是直接copy了官方的文档，有的是给出了解决方案，但是没有说明，有点看不懂到底要怎么弄。最后的最后，我差点就自己写原生。最终因为懒就没有自己写。所以我仔细观察...

关于element-ui backtop 不生效，无显示

levi2469的博客

01-11

2910

1、不用target属性也可以使用 <el-backtop></el-backtop> 2、用target属性 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> target：指向需要

参与评论您还未登录，请先登录后发表或查看评论

elementUI中的Backtop回到顶部

福建开源社区创始人www.fjkysq.com

11-26

5999

此文章转载于福建开源社区http://www.fjkysq.com/blog/77.html 一、前言 elementUI有说明文档，但我为什么还要重新写一下呢？因为文档也有坑，一开始使用时你复制进去，可能都没有效果。也不知道原因在哪，就如Backtop回到顶部的组件，不去看源码，真心不知道是怎么个所以然。一开始，我把这个组件放到我页面的底部，结果是无效果的，而且还会报css的这两个样式错误（...

element-ui Backtop组件的应用

7William的博客

04-20

198

element-ui Backtop组件的应用官网示例 <template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> </template> 写得不太清楚应用  <el-main&gt

element-ui BackTop改造，增加回到底部

c601757850的博客

05-18

1135

<template> <div> <transition name="el-fade-in"> <div v-if="toTopVisible" @click.stop="handleTopClick" :style="{ 'right': styleRight, 'bottom': styletopBottom }" class=".

Element-ui2 Backtop组件的正确使用方法

qq_46239972的博客

02-09

425

把target属性去掉不用给html、body、#app等高度或溢出样式可以放在组件内的任何位置

Element-UI组件之其他Others

TwentyOne__的博客

07-04

1448

Element-UI组件之其他OthersDialog 对话框基本用法自定义内容嵌套的 Dialog居中布局Tooltip 文字提示基础用法主题更多 Content高级扩展Popover 弹出框基础用法嵌套信息嵌套操作Card 卡片基础用法简单卡片带图片卡片阴影Carousel 走马灯基础用法指示器切换箭头卡片化方向Collapse 折叠面板基础用法手风琴效果自定义面板标题Timeline 时间线...

设置overflow：auto后，elementui的backtop不生效

最新发布

08-14

2. 使用其他滚动插件：要使backtop组件可以在设置overflow:auto属性后生效，可以考虑使用其他自定义滚动插件，例如BetterScroll、iScroll等。 3. 修改样式：可以对backtop组件进行一些样式上的调整，例如将backtop...

设置overflow auto后，elementui的backtop不生效

02-13

如果在Element UI中的backtop组件上设置了overflow: auto，那么backtop就不会生效。这是因为overflow: auto会导致元素的溢出内容被修剪，并且可以通过滚动条查看。因此，如果backtop组件的位置在已修剪的内容中，它...

ElementUI v2.15 使用手册.pdf

02-28

本手册主要介绍ElementUI v2.15版本的安装、快速上手方法、国际化、自定义主题、内置过渡动画以及各类组件的使用方法。 ### 安装 ElementUI可以通过npm包管理器进行安装。推荐使用npm安装，因为它可以更好地与...

element的BackTop（回到顶部）组件的使用。

ddx2019的博客

12-27

2637

封装Backtop 在components下的新建BackToTop 文件夹，在文件夹下新建backToTop.vue backToTop.vue <template> <div class="backto-top-bg"> <el-backtop :target="eleSelector" :visibility-height="30...

element ui 组件的库的Backtop用法，以及没有效果的问题

weixin_46174785的博客

08-05

1223

Backtop组件的基本用法： js代码 // 这个div标签叫作用是，滚动的到顶部的距离是以他基准，最好放到顶部 <div class='container'></div> <el-backtop target=".container" > <div class="toTop">Top</div> </el-backtop> css代码： .container { width: 100%; /

vue+element-ui 回到顶部组件backTop

热门推荐

weixin_42598901的博客

08-16

1万+

<template> <div class="wraper"> <template> Scroll down to see the bottom-right button. <el-backtop target=".wraper"> &l...

element-ui的el-backtop用法

weixin_44012722的博客

06-17

6599

注意必须在一个div内写el-backtop，其次这个div要有个类选择器，el-backtop的target写这个div的类选择器的名字，这个div的类选择器的样式必须有这俩个不要修改大功告成！！！

基于 Vue 2.x 实现的 back-top 组件

weixin_33935505的博客

07-23

775

bga-back-top-vue 基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及通过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只需要在根组件中添加一次即可 npmnpmvue2.x 效果图 Demo bga-back-top 基本使用 1.安装依赖 npm install --save bga-back-top-vue复制...

用Vue写backToTop指令

weixin_35022783的博客

11-10

2889

用Vue写backToTop指令指令是Vue框架中非常有用，目前正在学习当中。以下是参照教程写的返回顶部backToTop指令，具有以下功能。点击按钮后可以返回顶部。当滚动到一定位置后出消失与隐藏。还有待改进的地方。代码中有2句是重复的。未写到一个.vue文件中，复用性不高。以上两点努力在以后的学习中实现。话不多说，直接上代码。代码块<!DOCTYPE html> <html lan

Element UI中的BackTop无法使用的解决方案

Jesus_z的博客

03-02

5781

问题描述最近在写个人博客时使用elementUI来作为前端框架，但是当我使用到BackTop时发现无法使用的现象。具体表现为：滚动页面后该返回顶部按钮组件并没有出现。 ElementUI官网文档：https://element.eleme.cn/#/zh-CN/component/backtop 问题分析在查阅了大量文章后，发现该组件的实用方式很简单，直接引入即可，如下图是最简单的...

VUE回到顶部组件，使用requestAnimationFrame

从入门到进错门

12-14

1万+

这篇文章是18年就写的了，那时候element-ui还没有回到顶部组件，我就弄了一个，现在官网已经有了。想直接使用的话可以使用官网上的，但是官网的是使用setInterval写的，我就顺便改一下这篇文章，使用requestAnimationFrame弄一个

ElementUI - Backtop（回到顶部）组件使用方法

王佳斌

03-18

2674

前言官方的示例描述的不太清楚，很多朋友直接复制发现并不生效。如下图所示效果，可做成全部页面生效或某个单独页面生效。解决方案注意：我这里搞成了全局（所有页面都会生效），直接放在了 App.vue 了。打开 App.vue ，复制以下代码：   <el-backtop :bottom="30"> <div style="{ height: 100%;