[toc] # 3.1 基礎布局開發(一) ## 3.1.1 實現效果圖  ## 3.1.2 使用ps打開直播間(用戶端)設計稿 > 用ps打開直播間(用戶端)設計稿,設置設計稿的寬度為750px ## 3.1.3 實現直播間(客戶端)布局 1. 在pages目錄下創建live.nvue組件,并在pages.json中配置路徑  2. 點擊發現頁面(也就是首頁)的直播間列表,跳轉到直播間頁面 * 在首頁列表的模塊的第二個view標簽上綁定事件與方法 ``` <!-- 列表模塊 --> <view class="flex flex-wrap"> <view @click="openLive" v-for="(item,index) in 10" :key="index" style="width: 375rpx; height: 375rpx; padding: 5rpx; box-sizing: border-box; position: relative;"> ``` * 在methods中定義跳轉到直播間的方法 ``` <script> export default { data() { return { title: 'Hello' } }, onLoad() { }, methods: { openLive(){ uni.navigateTo({ url : "../live/live" }) } } } </script> ``` 3. 實現直播間直播視頻布局 * 取消原生導航欄 ``` { "path": "pages/live/live", "style": { "app-plus":{ "titleNView":false } } } ``` * 使用video組件當作背景,并播放拉流下來的直播內容 ``` <template> <view class="page"> <!-- 直播內容 --> <video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video> </view> </template> <script> export default { } </script> <style> .page{ flex : 1; } </style> ``` 4. 實現底部評論...等布局 ``` <!-- 底部評論..等 --> <view class="position-fixed right-0 bottom-0 left-0 bg-danger" style="height: 120rpx;"></view> ``` 5. 實現頭部布局 * 在onload生命周期中通過`uni.getSystemInfoSync()`獲取通知欄的高度 * 在data中定義statusBarHeight用來保存通知欄的高度 * 動態定義頭部的距離頂部的高度,設置頭部距離頂部的高度為通知欄的高度,否則通知欄就會覆蓋頭部的內容 ``` <!-- 頭部 --> <view class="bg-danger" style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}"></view> <script> export default { data(){ return { statusBarHeight : 0 } }, onLoad(){ //獲取通知欄的高度 let res = uni.getSystemInfoSync(); this.statusBarHeight = res.statusBarHeight; } } </script> ```