定义一个组件,然后监听滚动事件
<template>
<div class="nav-bar" :class="{'is_fixed':isFixed}">
<div class="container">
<div class="pro-title">
小米8
</div>
<div class="pro-param">
<a href="javascript:;">概述</a>
<a href="javascript:;">参数</a>
<a href="javascript:;">用户评价</a>
<slot name="buy"></slot>
</div>
</div>
</div>
</template>
<script>
// scoped
export default {
name: 'productParam',
props: {
title: String
},
data () {
return {
isFixed: false
}
},
methods: {
initHeight () {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 152) {
this.isFixed = true
} else {
this.isFixed = false
}
}
},
mounted () {
window.addEventListener('scroll', this.initHeight)
},
unmounted () {
// false 冒泡
window.removeEventListener('scroll', this.initHeight, false)
}
}
</script>
<style lang="scss">
@import '../assets/scss/config.scss';
@import '../assets/scss/mixin.scss';
.nav-bar {
height: 70px;
line-height: 70px;
border-top: 1px solid $colorH;
background-color: $colorG;
&.is_fixed {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 5px 5px $colorE;
}
.container {
@include flex();
.pro-title {
font-size: $fontH;
color: $colorB;
font-weight: 700;
}
.pro-param {
font-size: $fontJ;
a {
color: $colorC;
position: relative;
margin-right: 14px;
&::after {
content: '';
position: absolute;
top: 3px;
left: -7px;
width: 1px;
height: 10px;
background-color: $colorC;
}
&:first-child::after {
display: none;
}
}
}
}
}
</style>
插槽用法
<template>
<div class="product">
<product-param>
<template v-slot:buy>
<button class="btn">立即购买</button>
</template>
</product-param>
<div class="h">123</div>
</div>
</template>