[TOC] ### 1. 动态绑定style属性 ~~~ <template> <div class="back-fixed" :style="isOpacity" > <i class="iconfont back">&#xe61f;</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">&#xe8ef; </i> <div class="back-fixed" :style="isOpacity" > <i class="iconfont back">&#xe61f;</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">&#xe61f;</i> ~~~