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
}