Vue 详情header组件

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情header组件

目录

详情header组件

监听事件实现

创建组件

使用组件

引入组件

注册

在页面使用

返回按钮

设置按钮样式

指令方式实现

注册指令

指令传值

总结

---

详情header组件

详情页面使用指令完成吸顶功能。

监听事件实现

通过监听事件来实现，当滚动到顶层时隐藏，离开时清空，示例如下：

 

创建组件

在mycomponents/detail下创建DetailHeader.vue文件。

示例如下：

<template>
    <div class="header">
        header
    </div>
</template>

使用组件

在DetailView.vue中使用DetailHeader.vue组件。

首先引入组件，然后局部注册，最后在页面的上部使用。

引入组件

import detailHeader from '@/mycomponents/detail/DetailHeader'

注册

components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader
  },

在页面使用

<template>
    <div class="content" v-if="filmInfo">
      <detail-header></detail-header>

返回按钮

DetailHeader.vue文件中增加返回按钮，标题改为slot，设置并绑定返回事件。

代码如下：

<template>
    <div class="header">
        <i @click="handleBack"> < </i>
        <slot></slot>
    </div>
</template>
<script>
export default {
  methods: {
    handleBack () {
      this.$router.back()
    }
  }
}
</script>

 

设置按钮样式

设置返回按钮的样式

<style lang="scss" scoped>
.header {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 2.444444rem;
    line-height:2.444444rem;
    background-color: white;
    text-align:center;
    i {
        font-size: 30px;
        position: fixed;
        left: .555556rem;
        top:0;
        height: 2.4444444rem;
        line-height: 2.4444444rem;
    }
}
</style>

 

指令方式实现

在detailView.vue文件中设置使用自定义指令时，传递距离上面尺寸。

<detail-header v-scroll>{{filmInfo.name}}</detail-header>

注册指令

判断两项top是为了兼容性

Vue.directive('scroll', {
  inserted (el) {
    console.log(document.documentElement.scrollTop)
    // el.style.display = 'none'

    window.onscroll = () => {
      console.log('scroll')

      if (document.documentElement.scrollTop || document.body.scrollTop > 50) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})

 

指令传值

设置使用自定义指令时，传递距离上面距离。

示例如下：

<detail-header v-scroll="50">{{filmInfo.name}}</detail-header>

在定义指令时，通过binding.value接收值

Vue.directive('scroll', {
  inserted (el, binding) {
    // el.style.display = 'none'

    window.onscroll = () => {
      console.log('scroll')

      if (document.documentElement.scrollTop || document.body.scrollTop > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})

总结

Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情header组件