vue实现滚动条改变头部组件样式
这个也是之前看到的网站里的样式，他能根据滚动条的位置来改变css，我就也做了一个在vue里面。
这个需要用到vuex，sass，如果没有学过的可以先去网上找一下教程。
听首歌先，如果没放出来那就是我写错了，不用管了。。song name: Mermaid girl
mutation.js------:
import Vue from 'vue'
import {GETSCROLLTOP} from './mutation-types'
export default{
[GETSCROLLTOP]:(state)=>{//这样写，mutation-types返回，然后mepMutation。
state.scrollTop = Math.floor(document.documentElement.scrollTop)
//使用js，把滚动条数值去掉小数点后面的数值，然后返回整数存入。
// console.log(state.scrollTop)
},
}
mutation-types.js------:
export const GETSCROLLTOP = 'GETSCROLLTOP'
store.js------:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import mutations from './mutation';
//import actions from './action';
//import getters from './getter';
const state = {
scrollTop:0,//全局滚动条数值
//count:0,
}
export default new Vuex.Store({
state,
// getters,
// actions,
mutations,
})
headerActive.vue------:
<template>
<div>
<div :class="[scrollTop>=100 ? 'header_Active':'header_Move', 'header_default']">
<!--这里使用三元表达式判断样式 ，第三个是默认样式不用管。-->
<div>
<div>
<div>
<div id="user_Information">
<img id="blogLogo" :src="MyBlogLogo" alt />
<div v-show="ifLogin" id="Login">
<img id="userImg" :src="userImg" alt="错误" />
<div id="userID">ID :{{userName}}</div>
<div>退出账户</div>
</div>
<div v-show="!ifLogin" id="unLogin">
<router-link to="/Login/LoginUser">登录</router-link>
</div>
</div>
</div>
<div>
<ul>
<li v-for="item in routerlinkList">
<router-link :to="item.routerlink">{{item.routername}}</router-link>
</li>
</ul>
</div>
</div>
</div>
<!-- -->
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex'//映射方法引入
export default{
data(){
return{
userName: "黑雪红毛怪",
userImg: require("../../assets/img/mst.png"),
MyBlogLogo: require("@/assets/img/MyBlog.png"),
ifLogin: false,
routerlinkList:[
{routerlink:'/',routername:'首页'},
{routerlink:'/Blog/BlogShow',routername:'我的微博'},
{routerlink:'/News/News',routername:'新闻'},
{routerlink:'/AboutMe/AboutMe',routername:'关于我'},
{routerlink:'/Introduce/Introduce',routername:'介绍'},
]
}
},
computed:{
scrollTop(){
return this.$store.state.scrollTop; //返回scrollTop
}
},
mounted() {//组件更新后的钩子函数。
window.addEventListener('scroll',this.setscroll)//给window添加鼠标中键滚动事件，
},
methods:{
...mapMutations([]),//应用提交方法
setscroll(){
this.$store.commit('GETSCROLLTOP',true)//提交滚动条数据
}
},
}
</script>
<style scoped="scoped">
.header{
width: 100%;
height: 100px;
.header_default{
position: fixed;
top: 0;
min-width: 1200px;
transition:all 1s;
border-bottom-right-radius:5em 1em;
border-bottom-left-radius:5em 1em;
background-color: rgba(0,205,205,0.6);
.mg_box {
height: 100%;
width: 80%;
// background-color: white;
margin: 0 auto;
.mg_box_flex {
display: flex;
justify-content: space-between;
height: 100%;
.Label_inHeader {
height: 85%;
margin-top: 5px;
/*background-color: pink;*/
ul {
display: flex;
height: 100%;
li {
display: flex;
background-color: #63b8ff;
width: 100px;
text-align: center;
// border-right: 3px solid #888888;
box-shadow: 2px 2px 8px #888888;
border-radius: 8px;
margin-left: 2px;
a {
color: #ffdead;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
}
}
}
.User_inHeader {
height: 100%;
// background-color: yellow;
#user_Information {
display: flex;
height: 100%;
align-items: center;
font-size: 12px;
#blogLogo {
height: 58px;
margin-right: 20px;
}
div{
display: flex;
align-items: center;
}
#Login {
#userImg {
width: 50px;
height: 50px;
border-radius: 25px;
}
#userID{
color: #63b8ff;
}
p {
display: inline-block;
}
}
#unLogin{
}
}
}
}
}
}
.header_Active{//scrollTop数值小于100之后的样式
height: 65px;
width: 100%;
}
.header_Move{
height: 95px;
width: 100%;
// background-color: red;
}
}
</style>
以上，在store中存入scrollTop作为存储滚动条数值的参数，
mutation中写一个计算滚动条数值的函数对象GETSCROLLTOP，通过mutation-types返回。
在组件中使用计算属性computed给出一个scrollTop，在标签中写一个{{scrollTop}}
让我们在视图层上看到滚动条数值。//当然这个我写到另一个组件里了，所以这个组件里没有。
通过mounted钩子函数给window对象添加一个鼠标滚动事件，
methods引用...mapMutations映射，
鼠标滚动事件setscroll使用commit来用mutation的GETSCROLLTOP函数提交滚动条数值，
再根据组件中的三元表达式来更换样式，这样就能达成滚动条判断样式了。
这个方法还能重复使用。
讲道理vue还是比react用起来简单的多。真香。
