Posted in Javascript onMay 30, 2019
写在前面
移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这时候如果添加一个滑动页面,图标透明度变低,同时 移动到屏幕边进行隐藏,效果如下。
所用原理
监听滑动事件,每次进行滑动时,触发动画,添加定时器,1.4s后显示该图标。具体代码如下:
<template> <section class="fixed-icon" :style="{ bottom: bottom + 'rem' }" :class="[ !transition ? 'fixed-transition' : '']" @click="event"> <slot></slot> </section> </template> <script> export default { name: 'fixedIcon', props: { bottom: { // 改图标距离底部距离 单位 rem type: Number, default: 3, }, }, data () { return { transition: true, // 是否触发动画 timer: null, // 定时器 }; }, methods: { event() { this.$emit('clickEvent'); // 绑定点击图表时间 }, handleScroll () { // 每次滑动都会执行函数 this.transition = false; if (this.timer) { // 判断是否已存在定时器 clearTimeout(this.timer); } this.timer = setTimeout(() => { // 创建定时器,1.4s后图标回归原位置 this.transition = true; }, 1400); } }, mounted () { window.addEventListener('scroll', this.handleScroll); // 监听页面滑动 } }; </script> <style scoped lang="scss"> /*@media only screen and (min-width:750px){html{font-size:20px}} */ .fixed-icon{ position: fixed; z-index: 1100; right: 1.7rem; display: flex; justify-content: center; align-items: center; height: 4.1rem; width: 4.1rem; border-radius: 50%; background-color: rgba(128, 128, 128, 0.8); transition: 0.7s ease-in-out; } .fixed-transition{ right: -2.05rem; opacity: 0.4; transition: 1s ease-in-out; } </style>
引入代码如下:
<template> <section class="content"> <fixed-icon :bottom="3" @clickEvent="chat"> <i class="icon-chat"></i> </fixed-icon> </section> </template> <script> import fixedIcon from './components/fixedIcon.vue'; export default { name: 'test', components: { fixedIcon }, data () { return { }; }, methods: { chat() { // 图标点击事件 console.log('你好'); }, }, mounted() { document.title = 'Vue制作固定定位图标滑动隐藏效果'; }, }; </script> <style scoped lang="scss"> .content{ height: 200vh; } .icon-chat{ width: 2rem; height: 1.9rem; background: url('http://pfpdwbdfy.bkt.clouddn.com/image/test/fixedIconTranstion/wechat.png') no-repeat; background-size: 2rem 1.9rem; } </style>
github代码
总结
以上所述是小编给大家介绍的Vue实现固定定位图标滑动隐藏效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
Vue实现固定定位图标滑动隐藏效果
- Author -
Yuhoo声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@