3.11 送礼物弹框组件(一) - 布局 · UNI-APP实战直播App

[toc] # 3.11 送礼物弹框组件(一) - 布局 ## 3.11.1 实现送礼物的弹出层效果 1. 使用popup组件实现弹出层效果 ```  <uni-popup type="bottom" ref="giftPopup"> </uni-popup> ``` 2. 点击礼物图标让送礼物的弹出层效果显示 ``` <view @click="openGift" style="height:80rpx; width: 80rpx;" class="flex mr-1 justify-center rounded-circle align-center bg-warning"> <text class="iconfont"></text> </view> //打开送礼物弹出层 openGift(){ this.$refs.giftPopup.open() }, ``` ## 3.11.2 实现送礼物布局 - 头部 ```  <uni-popup type="bottom" ref="giftPopup"> <view style="width: 750rpx; height: 550rpx;" class="bg-white"> <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">礼物</text> <view style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont"></text> </view> </view> </view> </uni-popup> ``` ## 3.11.3 实现送礼物布局 - 中间 ```  <uni-popup type="bottom" ref="giftPopup"> <view style="width: 750rpx; height: 550rpx;" class="bg-white"> <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">礼物</text> <view style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont"></text> </view> </view> <swiper class="border-top border-bottom" :indicator-dots="true" style="height: 350rpx;" :duration="500"> <swiper-item> <view class="flex flex-wrap"> <view v-for="(item,index) in 8" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center"> <image src="../../static/gift/1.png" style="width: 100rpx; height: 100rpx;"></image> <view class="flex mt-1"> <text class="text-warning font mr-1">鸡蛋</text> <text class="text-secondary font">1</text> </view> </view> </view> </swiper-item> </swiper> <view style="height: 100rpx;"></view> </view> </uni-popup> ``` ## 3.11.4 实现送礼物布局 - 底部 ```  <uni-popup type="bottom" ref="giftPopup"> <view style="width: 750rpx; height: 550rpx;" class="bg-white"> <view style="height: 100rpx;" class="flex justify-between align-center"> <text class="text-main font-md ml-3">礼物</text> <view style="height:100rpx; width: 100rpx;" class="flex justify-center align-center"> <text class="iconfont"></text> </view> </view> <swiper class="border-top border-bottom" :indicator-dots="true" style="height: 350rpx;" :duration="500"> <swiper-item> <view class="flex flex-wrap"> <view v-for="(item,index) in 8" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center"> <image src="../../static/gift/1.png" style="width: 100rpx; height: 100rpx;"></image> <view class="flex mt-1"> <text class="text-warning font mr-1">鸡蛋</text> <text class="text-secondary font">1</text> </view> </view> </view> </swiper-item> </swiper> <view style="height: 100rpx;" class="flex align-center justify-end"> <view class="bg-warning flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font">充值</text> </view> <view class="bg-main flex mr-3 align-center py-2 rounded px-2 justify-center" > <text class="font text-white">发送</text> </view> </view> </view> </uni-popup> ```