溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
寫在前面
移動端頁面，有時候會出現一些固定定位在底部圖標，比如購物車等。這時候如果添加一個滑動頁面，圖標透明度變低，同時 移動到屏幕邊進行隱藏，效果如下。
所用原理
監聽滑動事件，每次進行滑動時，觸發動畫，添加定時器，1.4s后顯示該圖標。具體代碼如下：
<template>
<section class="fixed-icon"
:
: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實現固定定位圖標滑動隱藏效果,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
