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 - HTML的request类
Jul 15 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 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
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP实现微信发红包程序
2015/08/24 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
详解PHP PDO简单教程
2019/05/28 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python的几种开发工具介绍
2007/03/07 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
详解numpy的argmax的具体使用
2019/05/27 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python tcp传输代码实例解析
2020/03/18 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
植树节活动总结
2014/04/30 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers