网站域名到期后果四川人力资源考试官网二建
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组件