06——vue企业级电商系统(产品站页面)

1. 组件吸顶实现
2. 视频模块实现
3. Slide动画实现
4. 产品站交互实现

组件吸顶
class与style样式结合

<div class="nav-bar" :class="{'is_fixed':isFixed}">
</div>

默认为false，故而一开始没有is_fixed这个类

 data(){
      return {
        isFixed:false
      }
  }

监听，当其滚动屏幕时，调用initHeight方法，判断滚动的距离是否超过了nav-bar的高度，如果是，就设置为true，有了is_fixed这个类。并用destroyed销毁

 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(){
    //false为事件行为处理方式，false是冒泡，true是捕获，默认为true
      window.removeEventListener('scroll',this.initHeight,false)
    }

is_fixed这个类的样式设为固定

  .nav-bar{
    height:70px;
    line-height:70px;
    border-top:1px solid $colorH;
    background-color:$colorG;
    z-index:10;
    &.is_fixed{
      position:fixed;
      top:0;
      width:100%;
      box-shadow: 0 5px 5px $colorE;
    }
 }

视频组件

• muted 静音播放
• autoplay 自动播放
• controls 属性供添加播放、暂停和音量控件
• <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

实例

<video src="/imgs/product/video.mp4" muted autoplay controls="controls">
	不支持 video 元素的浏览器
</video>

product/id

data{
	id: 31
	categoryId: 100012
	name: "小米CC9e"
	subtitle: "3200万+4800万 前后双旗舰相机"
	mainImage: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/df9b3e7a562e02a33eb069b3f0119815.png"
	subImages: null
	detail: null
	price: 1299
}