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 进度条 实现代码
Jul 30 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
微信小程序实现日历小功能
Nov 18 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
DOM 中的事件处理介绍
2012/01/18 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
浅析location.href跨窗口调用函数
2016/11/22 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
原生js实现随机点名
2020/07/05 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python 2.7.14安装图文教程
2018/04/08 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
.net工程师笔试题
2012/06/09 面试题
什么是设计模式
2012/06/17 面试题
写给保洁员表扬信
2014/01/08 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
八项规定对照检查材料
2014/08/31 职场文书
人民的好儿女观后感
2015/06/18 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android