VUE實(shí)現(xiàn)吸底按鈕
本文實(shí)例為大家分享了VUE實(shí)現(xiàn)吸底按鈕的具體代碼,供大家參考,具體內(nèi)容如下
<template> <div id='test'> <ul class='list-box'> <li v-for='(item, key) in 50' :key='key'> {{ item }} </li> </ul> <transition name='fade'> <p : v-if='headerFixed'> 吸底按鈕 </p> </transition> </div></template> <script>export default { name: ’test’, data() { return { headerFixed: false, } }, mounted() { window.addEventListener(’scroll’, this.handleScroll) }, destroyed() { window.removeEventListener(’scroll’, this.handleScroll) }, methods: { handleScroll() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop this.headerFixed = scrollTop > 50 }, },}</script> <style lang='scss' scoped='scoped'>#test { .list-box { padding-bottom: 50px; } .go { background: pink; text-align: center; line-height: 50px; width: 100%; } .isFixed { position: fixed; bottom: 0; } .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 0.8s; } .fade-leave-to { opacity: 0; } .fade-leave-active { transition: opacity 0.8s; }}</style>
效果圖:


以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享2. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. uniapp自定義驗(yàn)證碼輸入框并隱藏光標(biāo)6. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論7. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向8. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享9. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)10. asp批量添加修改刪除操作示例代碼

網(wǎng)公網(wǎng)安備