1. 鼠標滾動漸隱漸現、iconfont 在vue中的使用 · vue.js

[TOC] ### 1. 動態綁定style屬性 ~~~ <template> <div class="back-fixed" :style="isOpacity" > <i class="iconfont back"></i> <p>{{title}}</p> </div> </template> data() { return { isOpacity:{ opacity:0 } }; 再通過兩個監聽事件來動態的設置opacity的值 ~~~ ### 2. 在組件掛載完成時添加監聽事件 ~~~ mounted() { window.addEventListener('scroll',this.handleScroll) }, methods:{ handleScroll(){ var top = document.documentElement.scrollTop || document.body.scrollTop; /* 滾動條距離頂部的距離達到200時候,opacity==1 */ var opacity = top/200; if(opacity>=1){ opacity = 1; } this.isOpacity.opacity = opacity; }, ~~~ ### 3. 在組件卸載時（退出頁面）移除監聽函數 ~~~ destroyed(){ window.removeEventListener("scroll",this.handleScroll); } ~~~ ### 4整體展示 ~~~ <template> <div class="about"> <i @click="handleClick" class="iconfont back-ab"> </i> <div class="back-fixed" :style="isOpacity" > <i class="iconfont back"></i> <p>{{title}}</p> </div> <div class="content"> <img :src="imgUrl" alt> <h6>{{title}}</h6> </div> <p>{{summary}}</p> </div> </template> <script> import axios from "axios-jsonp-pro"; export default { name: "About", data() { return { imgUrl: "", title: "", summary: "", isOpacity:{ opacity:0 } }; }, mounted() { var id = this.$route.params.id; var url = "https://api.douban.com/v2/movie/subject/"; axios.jsonp(url + id).then(res => { this.imgUrl = res.images.small; this.title = res.title; this.summary = res.summary; }); window.addEventListener('scroll',this.handleScroll) }, methods:{ handleScroll(){ //獲取滾動條距離頂部的距離 var top = document.documentElement.scrollTop || document.body.scrollTop; /* 滾動條距離頂部的距離達到200時候,opacity==1 */ var opacity = top/200; if(opacity>=1){ opacity = 1; } this.isOpacity.opacity = opacity; }, handleClick(){ console.log(1); //當路徑只有/表示返回主頁面 this.$router.push('/') } }, destroyed(){ window.removeEventListener("scroll",this.handleScroll); } }; </script> <style lang="scss" scoped> .about { max-width: 800px; margin-left: auto; margin-right: auto; height:2000px; h6{ line-height: 40px; } img{ margin-top: 20px; } } .content{ text-align: center; margin-bottom: 20px; } .back-ab{ position: absolute; z-index: 100; font-size: 30px; } .back-fixed{ position: fixed; width:100%; height:50px; background: rgb(221, 75, 75); top:0; display: flex; align-items: center; justify-content: center; color:#fff; .back{ position: absolute; left:0; font-size: 30px; color:#fff; } } </style> ~~~ ### vue中iconfont的使用 ~~~ 1. 再public中的index.html中引入iconfont的css 2. 再要使用的文件下直接使用 3. 如：<i class="iconfont back"></i> ~~~