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 23 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
解决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连接Oracle数据库
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
编写简单的Python程序来判断文本的语种
2015/04/07 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python实现文件的分割与合并
2019/08/29 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
tensorflow的计算图总结
2020/01/12 Python
Python的collections模块真的很好用
2021/03/01 Python
自我推荐书
2013/12/04 职场文书
理财学专业自荐书
2014/06/28 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
外科护士长工作总结
2015/08/12 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
化工生产实习心得体会
2016/01/22 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python