Vue项目实战：产品站与商品详情页面实现

最新推荐文章于 2024-07-23 17:22:52 发布

林夏天

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量1.6k

点赞数 2

分类专栏： Vue.js项目实战:从零独立开发企业级电商系统文章标签： vue javascript vue.js 前端 css

本文链接：https://blog.csdn.net/weixin_46124214/article/details/105274029

版权

本文详细介绍了使用Vue.js构建产品站页面和商品详情页面的过程，包括组件吸顶、视频模块实现、交互设计以及bug修复。在产品站页面中，重点讲解了吸顶组件、视频模块的实现及交互细节。而在商品详情页面，主要涉及清除浮动的技巧和交互功能的实现。

摘要由CSDN通过智能技术生成

产品站页面

（1）组件吸顶实现

在要实现吸顶的组件文件ProductParam.Vue中

<template>
    <div class="nav-bar">
        <div class="container">
            <div class="pro-title">
                小米8
            </div>
            <div class="pro-param">
                <a href="javascript:;">概述</a><span>|</span>
                <a href="javascript:;">参数</a><span>|</span>
                <a href="javascript:;">用户评价</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/config.scss';
  @import './../assets/scss/mixin.scss';
  .nav-bar{
    
    height:70px;
    line-height:70px;
    border-top:1px solid $colorH;
    background-color:$colorG;
    z-index:10;
    &.is_fixed{
    
      position