vue簡易指引使用者向下翻閱懸浮效果箭頭實現
阿新 • • 發佈：2019-01-13
在元件mounted階段，給螢幕新增螢幕滾動監聽事件：
mounted: function () {
window.addEventListener('scroll', this.menu)
},
// 區域性滾動直接@scroll="menu"，繫結在節點上就行了螢幕滾動時，指引箭頭消失函式：
menu: function () { this.scroll = document.body.scrollTop // 區域性就是dom.scrollTop if (this.scroll > 0) { this.hd = false } else { this.hd = true } },
html:
<div class="btn-arrow" v-show="this.hd">
<img src="../assets/bottom-arrow.png">
</div>簡單的向下浮動指引的css樣式:
.btn-arrow { margin:0; padding: 0; width: 0.4rem; height: 0.4rem; position: fixed; left: 50%; margin-left: -0.2rem; bottom: 2.15rem; animation:myfirst 1s infinite; animation-direction:alternate; -webkit-animation-direction:alternate; } .btn-arrow img { width:0.45rem; height: 0.3rem; } @keyframes myfirst { 0% {opacity:1; left: 50%;bottom: 2.15rem;} /*25% {opacity:0.4; left: 4.6rem;bottom: 2.75rem;}*/ 50% {opacity:0.6; left: 50%;bottom: 2.25rem;} /*75% {opacity:0.8; left: 4.6rem;bottom: 2.9rem;}*/ 100% {opacity:0.2; left: 50%;bottom: 2.35rem;} }