[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> ```