Vue实现固定定位图标滑动隐藏效果


Posted in Javascript onMay 30, 2019

写在前面

移动端页面,有时候会出现一些固定定位在底部图标,比如购物车等。这时候如果添加一个滑动页面,图标透明度变低,同时 移动到屏幕边进行隐藏,效果如下。

Vue实现固定定位图标滑动隐藏效果

所用原理

监听滑动事件,每次进行滑动时,触发动画,添加定时器,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实现固定定位图标滑动隐藏效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
浅谈Vue的响应式原理
May 30 #Javascript
vue实现固定位置显示功能
May 30 #Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 #Javascript
JS使用cookie保存用户登录信息操作示例
May 30 #Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 #Javascript
Vue使用axios出现options请求方法
May 30 #Javascript
vue动态注册组件实例代码详解
May 30 #Javascript
You might like
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
让alert不出现弹窗的两种方法
2014/05/18 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
python中set常用操作汇总
2016/06/30 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
学校七一活动方案
2014/01/19 职场文书
期中考试反思800字
2014/05/01 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
Python基础 括号()[]{}的详解
2021/11/07 Python
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技