- <template>
- <div class="nav-bar" :class="{ 'isFixed':isFixed }">
- <div class="container">
- <div class="pro-title">
- 小米8
- </div>
- <div class="pro-param">
- <a href="##">概述</a><span>|</span>
- <a href="##">参数</a><span>|</span>
- <a href="##">用户评价</a>
- <slot name="buy">立即购买</slot>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default{
- name:'nav-bar',
- data(){
- return{
- isFixed:false
- }
- },
- mounted() {
- window.addEventListener('scroll',this.initHeight)
- },
- methods:{
- initHeight(){
- let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //获取滚动的高度
- this.isFixed = scrollTop > 152 ? true : false
- }
- },
- destroyed() {
- window.removeEventListener('scroll',this.initHeight,false)
- }
- }
- </script>
- <style lang="scss">
- @import '../assets/scss/mixin.scss';
- @import '../assets/scss/config.scss';
- .nav-bar{
- height: 70px;
- line-height: 70px;
- border-top: 1px solid $colorH;
- background: $colorG;
- &.isFixed{
- 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;
- span{
- margin: 0 10px;
- }
- a{
- color: $colorC;
- }
- }
- }
- }
- </style>
- <template>
- <div class="product">
- <product-params>
- <template v-slot:buy>
- <button class="btn">立即购买</button>
- </template>
- </product-params>
- <div class="h">123</div>
- </div>
- </template>
- <script>
- import ProductParams from '../components/ProductParams';
- export default{
- name:'product',
- components:{
- ProductParams
- }
- }
- </script>
- <style lang="scss">
- .product{
- button{
- margin-left: 10px;
- }
- .h{
- height: 2000px;
- background: red;
- }
- }
- </style>

