elementUI中的Backtop回到顶部
此文章转载于福建开源社区http://www.fjkysq.com/blog/77.html
一、前言
elementUI有说明文档,但我为什么还要重新写一下呢?因为文档也有坑,一开始使用时你复制进去,可能都没有效果。也不知道原因在哪,就如Backtop回到顶部的组件,不去看源码,真心不知道是怎么个所以然。一开始,我把这个组件放到我页面的底部,结果是无效果的,而且还会报css的这两个样式错误(.page-component__scroll .el-scrollbar__wrap),看完这个文档,也没找到这两个是什么东西,在哪设置。全文搜索,也没找到这两个css。最后逼我进去看Backtop组件源码,看懂后,删除了没必要的东西,放置的位置调整一下,完美解决。这也是本站使用的回到顶部的效果。以下我会贴出官方文档及源码,还有解决思路
二、官方文档 https://element.eleme.cn/#/zh-CN/component/backtop
Backtop 回到顶部
返回页面顶部的操作按钮
基础用法
滑动页面即可看到右下方的按钮。
<template>Scroll down to see the bottom-right button.<el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
</template>
自定义显示内容
显示区域被固定为 40px * 40px 的区域, 其中的内容可支持自定义。
<template>Scroll down to see the bottom-right button.<el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100"><divstyle="{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>
如果没试过的可以先跟着官方的文档试下,看是否可行,若不可行,接着往下看
三、el-backtop组件源码
<template><transition name="el-fade-in"><divv-if="visible"@click.stop="handleClick":style="{'right': styleRight,'bottom': styleBottom}"class="el-backtop"><slot><el-icon name="caret-top"></el-icon></slot></div></transition>
</template><script>
import throttle from 'throttle-debounce/throttle';export default {name: 'ElBacktop',props: {visibilityHeight: {type: Number,default: 200},target: [String],right: {type: Number,default: 40},bottom: {type: Number,default: 40}},data() {return {el: null,container: null,visible: false};},computed: {styleBottom() {return `${this.bottom}px`;},styleRight() {return `${this.right}px`;}},mounted() {this.init();this.throttledScrollHandler = throttle(300, this.onScroll);this.container.addEventListener('scroll', this.throttledScrollHandler);},methods: {init() {this.container = document;this.el = document.documentElement;if (this.target) {this.el = document.querySelector(this.target);if (!this.el) {throw new Error(`target is not existed: ${this.target}`);}this.container = this.el;}},onScroll() {const scrollTop = this.el.scrollTop;this.visible = scrollTop >= this.visibilityHeight;},handleClick(e) {this.scrollToTop();this.$emit('click', e);},scrollToTop() {let el = this.el;let step = 0;let interval = setInterval(() => {if (el.scrollTop <= 0) {clearInterval(interval);return;}step += 10;el.scrollTop -= step;}, 20);}},beforeDestroy() {this.container.removeEventListener('scroll', this.throttledScrollHandler);}
};
</script>
组件的几个参数:
- visibility-height:滚动高度达到此参数值才出现,默认200,是number类型(使用如:visibility-height="100")
- target:触发滚动的对象,是String类型,你可以不传
- right:控制其显示位置, 距离页面右边距,默认40,是number类型,数值越大,离右边越远。
- bottom:控制其显示位置, 距离页面底部距离。默认40,是number类型,你可以调整他的值,越大离底部越远。
三、思路
当你看完backtop的组件源码后,你是否会有所领悟呢?他的组件参数都有默认值,这意思就是,我们可以什么都不传,调用这个组件即可使用。
<el-backtop></el-backtop>
是的,你没看错,把上面那段代码Copy到你的代码中,即可使用。记得把代码放在最外层的div里的第一个,不要放在尾部。
<div style="width: 100%;height: 100%;"><el-backtop :bottom="60"></el-backtop>
<div>
到此结束,这个组件,百度也得不到结果,能解决的只有你自己,要么放弃使用这个组件,要么就搞懂它,然后研究使用,当你知道它的原理,所有问题都不再是问题。这也是建议大家多看源码的理由之一。
elementUI中的Backtop回到顶部相关推荐
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索"回到顶部"的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery ...
- vue中平滑地回到顶部,回到底部
监听的滚动条需要平稳滑动,所以设置几个值,一个定时器.一个定义的scrollTop,方便后续操作 data(){scrollTop: 0,timer: null,scrollBottom: 0,tim ...
- php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件_javascript技巧
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
- php中页面平滑回到顶部代码,原生JS实现平滑回到顶部组件
返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置. 实现思路也很容易,只要改变document.documentEle ...
- 【Vue.js】Vue.js组件库Element中的图片、回到顶部、无限滚动和抽屉
1.Image 图片 图片容器,在保留原生img的特性下,支持懒加载,自定义占位.加载失败等. 基础用法 可通过fit确定图片如何适应到容器框,同原生 object-fit. <div clas ...
- Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景 开发框架是vue+webpac ...
- Vue HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示 资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
- 锚点定位 跳转到指定位置 回到顶部功能
一.跳转到指定位置 项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息 数据 arrayList:[{ //不一一列出 ...
- Vue项目页面回到顶部
实现的方法: 一.借助element-plus框架的Backtop回到顶部组件(点击按钮缓慢回顶部) 注意:这个组件想显示出来,必须放到产生滚动效果的元素内部,且是放到最上面!所以必须明确是哪个元素有 ...
- vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
最新文章
- 开源中国git关联xcode操作步骤
- 互联网协议系统介绍(转载)
- 计算机右键无法新建excel2007,Win7系统安装Office2007后,Excel不能自动关联,而且右键新建菜单里也没有新建Excel的选项...
- LeCun自曝使用C语言23年之久,2年前才上手Python,还曾短暂尝试Lua
- 微信小程序web-view能发送ajax,微信小程序web-view组件的坑
- CCF NOI1010 邮寄包裹
- Python之pypmml:pypmml的简介、安装、使用方法之详细攻略
- java gui 连接mysql数据库
- xib文件的读取方法
- android获取mp3/mp4媒体信息
- php视频自动播放源码,多个视频网站的视频自动播放代码
- BSW系列:CFAR算法解析
- 输入阻抗、输出阻抗、阻抗匹配和特性阻抗
- 马里兰帕克分校计算机科学,马里兰大学帕克分校管理信息系统(MIS)专业详解...
- 【CSS手册】css
- “一个优秀程序员可抵五个普通程序员!”
- redo log详解
- 实例分割最全综述(上):二阶段实例分割和一阶段实例分割
- C语言习题:输入10个学生5门课的成绩,分别用函数求:①每个学生平均分;②每门课的平均分;③找出所有分数中最高分
- 《全数据时代的炼金师》读书笔记(一)
热门文章
- python中pip安装报错的一些总结
- 自动化测试处理银行密码输入框
- android 开机自动启动服务,Android实现开机自动启动Service或app的方法
- bat批处理脚本获取window系统所有用户名并设置密码,禁用Guest账户
- vwallpaper2支持来电视频了!附简单教程
- 2023年天津天狮学院专升本报名考试的安排
- Java实现坦克大战小游戏
- unity与Android交互的currentActivity和入口Activity
- 99个互联网常用词汇,建议收藏“食用”
- 干货 :送你一份使用k近邻算法实现回归的实用指南(附代码、链接)