9-3#去哪儿网app#Header区域渐隐渐现

最新推荐文章于 2022-08-30 08:47:43 发布

Nav1

最新推荐文章于 2022-08-30 08:47:43 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/xinkuIe/article/details/109731009

版权

Vue.js 滚动效果 fixed定位动态样式监听事件

关键词由CSDN通过智能技术生成

app里一开始的效果：

当向下滑动的时候，逐渐出现header区域

这次的mission就是实现这个效果。

新建header组件，进行引用、注册等操作。然后在父组件Detail中给一个足够长的div class=content，让其能实现滚动。

设置向下滚动大于60的时候显示fixed，隐藏abs(代码中的类名)，用到监听事件，再用if逻辑语句实现v-show的true或false，从而达到显示和隐藏的效果。

fixed渐隐渐现用到动态样式:style，给fixed盒子绑定:style="opacityStyle"。

本节所有的代码如下：

<template>
    <div>
        <router-link tag="div" to="/" class="header-abs"
         v-show="showAbs">
            <div class="iconfont header-abs-back">&#xe624;</div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
            景点详情
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailHeader',
    data() {
        return { 
            showAbs: true,
            opacityStyle: {
                opacity : 0
            }
        }
    },
    methods: {
        handleScroll () {
            const top = document.documentElement.scrollTop
            if (top > 60) {
                let opacity = top / 140
                opacity = opacity > 1 ? 1:opacity
                this.opacityStyle = {
                    opacity : opacity
                }
                this.showAbs = false
            } else {
                this.showAbs = true
            }
            // console.log(document.documentElement.scrollTop);
        }
    },
    activated () {
        window.addEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .header-abs
    position: absolute
    left: .2rem
    top: .2rem
    width: .8rem
    height: .8rem
    line-height: .8rem
    border-radius: .4rem
    text-align: center
    background: rgba(0, 0, 0, .8)
    .header-abs-back
      color: #fff
      font-size: .4rem
  .header-fixed
    z-index: 2
    position: fixed
    top: 0
    left: 0
    right: 0
    height: $headerHeight
    line-height: $headerHeight
    text-align: center
    color: #fff
    background: $bgColor
    font-size: .32rem
    .header-fixed-back
      position: absolute
      top: 0
      left: 0
      width: .64rem
      text-align: center
      font-size: .4rem
      color: #fff
</style>

代码入库！