[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>
~~~
