2.2 首页开发(二) · UNI-APP实战直播App

[toc] # 2.2 首页开发(二) ## 2.2.1 将列表图片替换为演示图片 ```  <view class="flex flex-wrap"> <view style="width: 375rpx; height : 375rpx; padding: 5rpx; box-sizing: border-box;"> <image src="../../static/demo/1.jpg" style="width: 365rpx; height: 365rpx;" class="rounded" mode="aspectFill"></image> </view> </view> ``` ## 2.2.2 将图片mode模式设置为保持纵横比缩放图片 ``` <image src="../../static/demo/1.jpg" style="width: 365rpx; height: 365rpx;" class="rounded" mode="aspectFill"></image> ``` ## 2.2.3 实现金币和人气布局 ```  <view class="flex flex-wrap"> <view style="width: 375rpx; height : 375rpx; padding: 5rpx; box-sizing: border-box; position: relative;">  <image src="../../static/demo/1.jpg" style="width: 365rpx; height: 365rpx;" class="rounded" mode="aspectFill"></image>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; left: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);"> <text class="iconfont iconbizhongguanli text-warning mr-1"></text> <text class="text-white font">0</text> </view>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; right: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);"> <text class="text-white font mr-1">人气:</text> <text class="text-white font">0</text> </view> </view> </view> ``` ## 2.2.4 实现直播间名称与直播间状态布局 ```  <view class="flex flex-wrap"> <view style="width: 375rpx; height: 375rpx; padding: 5rpx; box-sizing: border-box; position: relative;">  <image src="../../static/demo/1.jpg" style="width: 365rpx; height: 365rpx;" class="rounded" mode="aspectFill"></image>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; left: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);"> <text class="iconfont iconbizhongguanli text-warning mr-1"></text> <text class="text-white font">0</text> </view>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; right: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);"> <text class="text-white font mr-1">人气:</text> <text class="text-white font">0</text> </view>  <view class="rounded-circle flex align-center justify-center" style="position: absolute; left: 15rpx; bottom: 15rpx; "> <text class="text-white font">标题</text> </view>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; right: 15rpx; bottom: 15rpx; background-color: rgba(0,0,0,0.4);"> <text style="width: 20rpx; height: 20rpx; display: block; " class="rounded-circle bg-danger mr-1"></text> <text class="text-white font">已结束</text> </view> </view> </view> ``` ## 2.2.5 使用v-for遍历直播间 ```  <view class="flex flex-wrap"> <view v-for="(item,index) in 10" :key="index" style="width: 375rpx; height: 375rpx; padding: 5rpx; box-sizing: border-box; position: relative;">  <image src="../../static/demo/1.jpg" style="width: 365rpx; height: 365rpx;" class="rounded" mode="aspectFill"></image>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; left: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);"> <text class="iconfont iconbizhongguanli text-warning mr-1"></text> <text class="text-white font">0</text> </view>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; right: 15rpx; top: 15rpx; background-color: rgba(0,0,0,0.4);"> <text class="text-white font mr-1">人气:</text> <text class="text-white font">0</text> </view>  <view class="rounded-circle flex align-center justify-center" style="position: absolute; left: 15rpx; bottom: 15rpx; "> <text class="text-white font">标题</text> </view>  <view class="rounded-circle px-2 flex align-center justify-center" style="position: absolute; right: 15rpx; bottom: 15rpx; background-color: rgba(0,0,0,0.4);"> <text style="width: 20rpx; height: 20rpx; display: block; " class="rounded-circle bg-danger mr-1"></text> <text class="text-white font">已结束</text> </view> </view> </view> ``` ## 2.2.6 首页代码优化 1. 轮播图组件化 2. 单个直播间组件化 3. 直播间组件列表组件化 4. icon图标组件化 5. 直播间状态(圆点)组件化 6. css样式分离