Element Backtop回到顶部的具体使用


Posted in Javascript onJuly 27, 2020

组件— 回到顶部

基础用法

Element Backtop回到顶部的具体使用

<template>
 Scroll down to see the bottom-right button.
 <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>

自定义显示内容

Element Backtop回到顶部的具体使用

<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: 100%;
  background-color: #f2f5f6;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
  }"
 >
  UP
 </div>
 </el-backtop>
</template>

Attributes

Element Backtop回到顶部的具体使用Events

Element Backtop回到顶部的具体使用

关于element-ui el-backtop返回顶部组件无效问题

el-backtop绑定的盒子,需要一个滚动样式:overflow-y: scroll;

<template>
 <div id="app">
  <router-view />
  // 绑定app盒子
  <el-backtop target="#app" :visibility-height="100"></el-backtop>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {};
 },
 methods: {},
 mounted() {}
};
</script>

<style>
#app {
 font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 width: 100%;
 height: 100%;
 /* 这里给app一个滚动效果 */
 overflow-y: scroll;
}
</style>

到此这篇关于Element Backtop回到顶部的具体使用的文章就介绍到这了,更多相关Element Backtop回到顶部内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
详解vue-cli3使用
Aug 14 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 #Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 #Javascript
Element Alert警告的具体使用方法
Jul 27 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php表单处理操作
2017/11/16 PHP
Javascript 布尔型分析
2008/12/22 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
PyQt5每天必学之布局管理
2018/04/19 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
python和php哪个更适合写爬虫
2020/06/22 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
Final类有什么特点
2012/04/25 面试题
公务员培训自我鉴定
2013/09/19 职场文书
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
项目计划书范文
2014/01/09 职场文书
银行求职信怎么写
2014/05/26 职场文书
假面舞会策划方案
2014/05/29 职场文书
社区清明节活动总结
2014/07/04 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers