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樣式分離