[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">&#xe67c;</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">&#xe607;</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">&#xe607;</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">&#xe607;</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> ```