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组件