Vue2.5 旅游项目实例20 详情页 实现Header渐隐渐显效果
创建分支:detail-header
拉取到本地并切换分支:
git pull
git checkout detail-header
在detail/components目录下,创建Header.vue文件:
<template> <div> <div class="header-abs"></div> <div class="header-fixed"></div> </div> </template> <script> export default { name: 'DetailHeader' } </script> <style lang="stylus" scoped> </style>
然后在Detail.vue中引用:
<template> <div> <detail-banner></detail-banner> <detail-header></detail-header> <div style="height:50rem"></div> </div> </template> <script> import DetailBanner from './components/Banner' import DetailHeader from './components/Header' export default { name: 'Detail', components: { DetailBanner, DetailHeader } } </script> <style lang="stylus" scoped> </style>
因为要展示出效果,所以我们在下面页面写了一个div设置了50rem的告诉,让页面撑开。
回到Header.vue继续编辑代码:
<template> <div> <div class="header-abs"> <div class="iconfont header-abs-back"></div> </div> <div class="header-fixed"></div> </div> </template> <script> export default { name: 'DetailHeader' } </script> <style lang="stylus" scoped> .header-abs position: absolute left: .2rem top: .2rem width: .8rem height: .8rem line-height: .8rem text-align:center border-radius: .4rem background: rgba(0, 0, 0, .8) .header-abs-back color: #fff font-size: .4rem </style>
效果图:
下面要点击返回箭头,返回到首页:
<template> <div> <router-link tag="div" to="/" class="header-abs"> <div class="iconfont header-abs-back"></div> </router-link> <div class="header-fixed"></div> </div> </template>
然后是 header-fixed 区域:
<div class="header-fixed"> <router-link to="/"> <div class="header-left"><div class="iconfont header-fixed-back"></div></div> </router-link> 景点详情 </div> <style lang="stylus" scoped> @import '~styles/varibles.styl' .header-fixed position: fixed top: 0 left: 0 right: 0 height $headerHeight line-height $headerHeight text-align:center color:#fff font-size: .32rem background: $bgColor .header-fixed-back position:absolute top:0 left:0 width: .64rem text-align: center font-size: .4rem color: #fff </style>
此时效果图:
下面就要写业务逻辑了,先定义一个变量:
<router-link tag="div" to="/" class="header-abs" v-show="showAbs"> <div class="iconfont header-abs-back"></div> </router-link> <div class="header-fixed" v-show="!showAbs"> <script> export default { name: 'DetailHeader', data () { return { showAbs: true } } } </script>
现在一进页面时,只显示header-abs区域了,下面就要当页面往下滚动到60像素左右,让 header-fixed 区域显示:
// 因为用了keepalive,所以要用activated activated () { window.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll () { // console.log(document.documentElement.scrollTop) const top = document.documentElement.scrollTop if (top > 60) { this.showAbs = false } else { this.showAbs = true } } }
此时页面往下滚动,header-abs 隐藏,header-fixed 区域显示,然后要实现渐隐渐显的效果:
<div class="header-fixed" v-show="!showAbs" :style="opactiyStyle"> <script> export default { name: 'DetailHeader', data () { return { showAbs: true, opactiyStyle: { opacity: 0 } } }, methods: { handleScroll () { // console.log(document.documentElement.scrollTop) const top = document.documentElement.scrollTop if (top > 60) { let opacity = top / 140 opacity = opacity > 1 ? 1 : opacity this.opactiyStyle = { opacity: opacity } this.showAbs = false } else { this.showAbs = true } } } } </script>
OK,当top在60-140像素之间是渐隐渐显的效果。
效果图:
然后可以提交代码:
git add .
git commit -m "实现header渐隐渐显效果"
git push
git checkout master
git merge detail-header
git push