element-ui backtop 组件源码分享

今日简单分享 backtop 组件的源码实现,从以下三个方面:

1、backtop 组件页面结构

2、backtop 组件属性

3、backtop 组件事件

一、backtop 组件页面结构

二、backtop 组件属性

2.1 target 属性,触发滚动的对象,类型 string,无默认值。

2.2 visibility-height 属性,滚动高度达到此参数值才出现,类型 number,默认值 200。

组件使用及展示效果:

2.3 right 属性,控制其显示位置, 距离页面右边距,类型 number,默认值 40。

组件使用及展示效果:

2.4 bottom 属性,控制其显示位置, 距离页面底部距离,类型 number,默认值 40。

组件属性使用及展示效果:

三、backtop 组件事件

3.1 click 事件,点击按钮触发的事件。

补充:requestAnimationFrame:window.requestAnimationFrame() 告诉浏览器------你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

参考连接:Window:requestAnimationFrame() 方法 - Web API 接口参考 | MDN

相关推荐
拾光拾趣录31 分钟前
括号生成算法
前端·算法
拾光拾趣录1 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子1 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录2 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界2 小时前
前端:优秀架构的坟墓
前端·架构
拼图2092 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode2 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~2 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
hbrown3 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎3 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip