左側的信息欄組件，主要分三塊: 作者名、視頻標題名、音樂名。這個左側信息欄信息是和當前播放視頻相關聯的，所以應該在循環視頻列表的時候，將左側信息欄組件壹起渲染出來，所以左側信息欄組件應該加到<swiper-item>中。
// components/list-left.vue
// components/video-list.vue
右側圖標欄組件，主要分為: 頭像圖標(頭像設置border-radius)、收藏圖標(iconfont圖標)、評論圖標(iconfont圖標)、分享圖標(iconfont圖標)、音樂圖標(圖片設置border-radius)，右側圖標欄組件設置壹個固定寬度，然後讓各種圖標依次排列即可，如:
// components/list-right.vue
當點擊頭像下部的加號圖標，可以對該用戶進行關註，即隱藏加號圖標，還有就是收藏愛心圖標顏色切換，當點擊收藏愛心圖標，愛心圖標變成紅色，再次點擊收藏愛心圖標，愛心圖標變回白色，這裏先只處理顏色的變化，具體後臺交互暫不處理。
// 在頭像圖標下方通過絕對定位添加壹個加號圖標，並定位到頭像底部
所謂滑動播放，即向上滑動的時候，暫停當前播放視頻並且播放下壹個視頻，向下滑動的時候，暫停當前播放視頻，播放上壹個視頻，而這最關鍵的就是如何判斷是向上滑動還是向下滑動。<swiper>組件給我們提供了壹個change事件，我們可以監聽這個change事件，拿到滑動完成後滑動到了第幾頁，即<swiper-item>的序號(從0開始)，然後與滑動前的當前page相比較，就可以知道是向上滑還是向下滑了。
判斷好了是上滑還是下滑後，我們還需要對上滑和下滑作出正確的處理，我們需要能夠拿到每個視頻播放組件，然後調用視頻播放組件上的相關方法對播放進行控制，這就是涉及到了父組件如何調用子組件上方法，父組件要想調用子組件上的方法，關鍵是父組件要能夠拿到子組件對象，我們可以通過ref實現，因為每壹個視頻播放組件是video-list視頻列表組件的壹個子組件，所以我們可以在video-list視頻列表組件中給每壹個video-player視頻播放組件添加上壹個ref="player"，即可拿到對應的視頻播放組件了。
// components/video-list.vue
要想實現單擊視頻播放組件，視頻可以進行播放和暫停切換，那麽我們需要給視頻播放組件添加壹個isPlay屬性表示視頻是否處於播放中，如果是播放中，那麽點擊就暫停，如果不是播放中，那麽點擊就播放，同時，由於uni-app不支持vue的dblclick事件的，所以我們還需要對單擊和雙擊操作進行判斷，我們需要定義壹個變量用於記錄用戶點擊次數，如果300ms內用戶點擊次數大於等於2，那麽就是雙擊，否則就是單擊，如:
雙擊的時候會向video-list父組件(視頻列表組件)發送壹個follow事件，video-list組件監聽到follow事件後再通知<list-right>組件調用其方法讓其愛心圖標變紅即可，如:
之前我們的視頻播放組件接收了壹個index屬性，即當前視頻對應的索引號，我們可以通過這個索引號判斷當前視頻是否是第壹個，然後將其video組件的autoPlay設置為true即可自動播放。
至此，首頁已經完成，效果圖如下:
原文地址： /article-5583-1.html