3.7 底部操作条 · UNI-APP实战直播App

[toc] # 3.7底部操作条 ## 3.7.1 实现底部操作条布局 1. 实现评论布局 ```  <view class="position-fixed right-0 bottom-0 left-0 bg-danger flex align-center justify-between" style="height: 120rpx;"> <view class="px-2"> <view style="height:80rpx;border-radius: 100rpx;background-color: rgba(255,255,255,0.12);" class="flex justify-center px-3 align-center"> <text class="text-white font">说点什么...</text> </view> </view> </view> ``` 2. 实现右侧金币、礼物、分享、关闭等图标布局 ```  <view class="position-fixed right-0 bottom-0 left-0 flex align-center justify-between" style="height: 120rpx;">  <view class="px-2"> <view style="height:80rpx;border-radius: 100rpx;background-color: rgba(255,255,255,0.12);" class="flex justify-center px-3 align-center"> <text class="text-white font">说点什么...</text> </view> </view>  <view class="flex align-center"> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white" style="font-size: 40px; "></text> </view> <view style="height:80rpx; width: 80rpx;" class="flex mr-1 justify-center rounded-circle align-center bg-warning"> <text class="iconfont"></text> </view> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white"></text> </view> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white"></text> </view> </view> </view> ```