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 拖拉缩放效果
Dec 10 Javascript
Javascript 强制类型转换函数
May 17 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
Vue的props父传子的示例代码
May 20 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
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
python list 合并连接字符串的方法
2013/03/09 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
python插入数据到列表的方法
2015/04/30 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python模块搜索路径代码详解
2018/01/29 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
python实现定时发送qq消息
2019/01/18 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
Python模块的制作方法实例分析
2019/12/21 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
毕业生求职推荐信
2013/11/04 职场文书
建议书的格式
2014/05/12 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
实习单位指导教师评语
2014/12/30 职场文书
导游带团欢迎词
2015/09/30 职场文书
初中语文教师研修日志
2015/11/13 职场文书
辞职信怎么写?
2019/05/21 职场文书