Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果

更新時(shí)間：2019年05月30日 10:46:47 作者：Yuhoo

移動(dòng)端頁面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購(gòu)物車等。這篇文章主要介紹了Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果,需要的朋友可以參考下

寫在前面

移動(dòng)端頁面，有時(shí)候會(huì)出現(xiàn)一些固定定位在底部圖標(biāo)，比如購(gòu)物車等。這時(shí)候如果添加一個(gè)滑動(dòng)頁面，圖標(biāo)透明度變低，同時(shí) 移動(dòng)到屏幕邊進(jìn)行隱藏，效果如下。

所用原理

監(jiān)聽滑動(dòng)事件，每次進(jìn)行滑動(dòng)時(shí)，觸發(fā)動(dòng)畫，添加定時(shí)器，1.4s后顯示該圖標(biāo)。具體代碼如下：

<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: { // 改圖標(biāo)距離底部距離 單位 rem
    type: Number,
    default: 3,
   },
  },
  data () {
   return {
    transition: true, // 是否觸發(fā)動(dòng)畫
    timer: null, // 定時(shí)器
   };
  },
  methods: {
   event() {
    this.$emit('clickEvent'); // 綁定點(diǎn)擊圖表時(shí)間
   },
   handleScroll () { // 每次滑動(dòng)都會(huì)執(zhí)行函數(shù)
    this.transition = false;
    if (this.timer) { // 判斷是否已存在定時(shí)器
     clearTimeout(this.timer);
    }
    this.timer = setTimeout(() => { // 創(chuàng)建定時(shí)器，1.4s后圖標(biāo)回歸原位置
     this.transition = true;
    }, 1400);
   }
  },
  mounted () {
   window.addEventListener('scroll', this.handleScroll); // 監(jiān)聽頁面滑動(dòng)
  }
 };
</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() { // 圖標(biāo)點(diǎn)擊事件
    console.log('你好');
   },
  },
  mounted() {
   document.title = 'Vue制作固定定位圖標(biāo)滑動(dòng)隱藏效果';
  },
 };
</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代碼

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)固定定位圖標(biāo)滑動(dòng)隱藏效果,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: