Vue组件设计-滚动置顶设计案例
短信预约 -IT技能 免费直播动态提醒
在前端开发中，滚动置顶是一个比较常见的交互设计，特别是在一些大型网站的首页，当内容篇幅较多时，在页面的底部或是侧边都会放置一个滚动置顶的图标，方便用户快速回到顶部。
1. 滚动交互注意事项
1. 置顶图标在什么时候显示，什么时候消失；
2. 滚动的过程要做缓冲动画处理，即滚动要速度要递减，才不能显的那么的突兀；
2. 组件设计考虑因素
1. 组件要可以传参控制滚动置顶的位置；
2. 组件要可以传参控制滚动置顶图标在什么时候显示和消失；
3. 组件的滚动置顶图标最好支持传参自定义的样式；
4. 组件的滚动置顶图标在显示和消失时最好支持传参自定义的动画；
3. 基于Vue的滚动置顶设计实例
<template>
<transition :name="transitionName">
<div
v-show="visible"
@click="backToTop"
:style="customStyle"
class="back-to-ceiling">
<svg
width="16"
height="16"
aria-hidden="true"
viewBox="0 0 17 17"
class="Icon Icon--backToTopArrow"
xmlns="http://www.w3.org/2000/svg"
style="height: 16px; width: 16px">
<path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z"/>
</svg>
</div>
</transition>
</template>
<script>
export default {
name: "BackToTop",
props: {
// 显示时的高度
visibilityHeight: {
type: Number,
default: 400,
},
// 滚动置顶位置
backPosition: {
type: Number,
default: 0,
},
// 自定义的样式
customStyle: {
type: Object,
default: function () {
return {
right: "50px",
bottom: "50px",
width: "40px",
height: "40px",
"border-radius": "4px",
"line-height": "45px",
background: "#e7eaf1",
};
},
},
// 定义滚动动画
transitionName: {
type: String,
default: "fade",
},
},
data() {
return {
// 是否可见
visible: false,
// 滚动定时器
interval: null,
// 正在滚动中
isMoving: false,
};
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScroll);
if (this.interval) {
clearInterval(this.interval);
}
},
methods: {
// 页面滚动事件
handleScroll() {
this.visible = window.pageYOffset > this.visibilityHeight;
},
// 点击页面置顶
backToTop() {
if (this.isMoving) return;
const start = window.pageYOffset;
let i = 0;
this.isMoving = true;
this.interval = setInterval(() => {
const next = Math.floor(
this.easeInOutQuad(10 * i, start, -start, 500)
);
if (next <= this.backPosition) {
window.scrollTo(0, this.backPosition);
clearInterval(this.interval);
this.isMoving = false;
} else {
window.scrollTo(0, next);
}
i++;
}, 16.7);
},
// 速度递减运算
easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1){
return (c / 2) * t * t + b
};
return (-c / 2) * (--t * (t - 2) - 1) + b;
},
},
};
</script>
<style scoped>
.back-to-ceiling {
position: fixed;
display: inline-block;
text-align: center;
cursor: pointer;
}
.back-to-ceiling:hover {
background: #d5dbe7;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.back-to-ceiling .Icon {
fill: #9aaabf;
background: none;
}
</style>到此这篇关于Vue组件设计-滚动置顶的文章就介绍到这了,更多相关vue滚动置顶内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
