[toc]
# 3.12 送禮物彈框組件(二) - 功能
## 3.12.1 實現關閉送禮物彈框效果
```
<view style="height: 100rpx;" class="flex justify-between align-center">
<text class="text-main font-md ml-3">禮物</text>
<view @click="closeGift" style="height:100rpx; width: 100rpx;" class="flex justify-center align-center">
<text class="iconfont"></text>
</view>
</view>
//關閉送禮物彈出層
closeGift(){
this.$refs.giftPopup.close()
},
```
## 3.12.3 創建禮物的模擬數據
1. 在項目的根目錄下創建demo文件夾
2. 在demo文件夾內創建gift.js文件
3. 在gift.js文件內寫模擬的禮物數據
```
export default [{
"image": "/static/gift/1.png",
"id": 1,
"name": "雞蛋",
"coin": 1
}, {
"image": "/static/gift/2.png",
"id": 2,
"name": "666",
"coin": 2
}, {
"image": "/static/gift/3.png",
"id": 3,
"name": "雪糕",
"coin": 3
}, {
"image": "/static/gift/4.png",
"id": 4,
"name": "龍蝦",
"coin": 4
}, {
"image": "/static/gift/5.png",
"id": 5,
"name": "精靈球",
"coin": 5
}, {
"image": "/static/gift/6.png",
"id": 6,
"name": "膠囊",
"coin": 6
}, {
"image": "/static/gift/7.png",
"id": 7,
"name": "愛心",
"coin": 7
}, {
"image": "/static/gift/8.png",
"id": 8,
"name": "花",
"coin": 8
}]
```
## 3.12.2 將模擬的禮物數據進行動態渲染
1. 引入模擬數據的js文件
2. 在data中定義gifts屬性為數組,用來保存禮物的數據
3. 在頁面加載的時候給gifts的數據為js文件內模擬的數據
4. 設置v-for遍歷的屬性為gifts,并對數據進行動態綁定
```
<template>
<view class="page">
<!-- 直播內容 -->
<video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video>
<!-- 頭部 -->
<view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}">
<!-- 個人信息|觀看詳細信息 -->
<view class="px-2 flex justify-between" style="height:80rpx;">
<!-- 個人信息 -->
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<view class="p">
<image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
</view>
<!-- 昵稱與瀏覽量 -->
<view class="flex-1 flex flex-column justify-center">
<text class="text-white font">昵稱</text>
<text class="text-white font-sm">100</text>
</view>
<!-- 關注按鈕 -->
<view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;">
<text class="text-white">+</text>
</view>
</view>
<!-- 觀看情況 -->
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<!-- 觀看的用戶 -->
<scroll-view scroll-x="true" class="flex-1 flex">
<view class="p" v-for="(item,index) in 20" :key="index">
<image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
</view>
</scroll-view>
<!-- 觀看人數 -->
<view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;">
<text class="text-white font-sm">1000</text>
</view>
</view>
</view>
<!--金幣-->
<view class="px-2 my-2" style="height: 80rpx;">
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<view class="p">
<text class="text-warning">金幣</text>
</view>
<view class="flex-1 flex flex-column justify-center">
<text class="text-white font">100</text>
</view>
</view>
</view>
<!-- 禮物 -->
<f-gift ref="gift"></f-gift>
</view>
<!-- 彈幕 -->
<f-danmu ref="danmu"></f-danmu>
<!-- 底部評論..等 -->
<view class="position-fixed right-0 bottom-0 left-0 flex align-center justify-between" style="height: 120rpx;">
<view class="px-2" >
<view @click="openInput" 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 @click="openGift" 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 @click="back" 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>
<!-- 輸入框彈出層 -->
<uni-popup type="bottom" ref="input">
<view class="bg-white flex align-center px-3" style="height: 120rpx;">
<input placeholder="說點什么呢..." v-model="content" type="text" style="height: 80rpx;" class="border rounded flex-1 px-3 font-md">
<view :class="content == '' ? 'bg-main-disabled' : 'bg-main'" class=" flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit">
<text class="font text-white">發送</text>
</view>
</view>
</uni-popup>
<!-- 送禮物彈出層 -->
<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 @click="closeGift" 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 gifts" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center">
<image :src="item.image" style="width: 100rpx; height: 100rpx;"></image>
<view class="flex mt-1">
<text class="text-warning font mr-1">{{item.name}}</text>
<text class="text-secondary font">{{item.coin}}</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>
</view>
</template>
<script>
import fGift from "@/components/live/f-gift.vue"
import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue"
import fDanmu from "@/components/live/f-danmu.vue"
import demoGifts from "@/demo/gifts.js"
export default {
data(){
return {
statusBarHeight : 0,
content : "",
gifts : []
}
},
components: {
fGift,
uniPopup,
fDanmu
},
onLoad(){
//獲取通知欄的高度
let res = uni.getSystemInfoSync();
this.statusBarHeight = res.statusBarHeight;
//禮物數據
this.gifts = demoGifts;
},
mounted(){
//模擬發送禮物
setInterval(()=>{
this.$refs.gift.send({
username : "發送人",
avatar : "",
gift_name : "蛋糕",
gift_image : "/static/gift/3.png",
num : 1
})
},3000)
//模擬發送彈幕
// let id = 1;
// setInterval(()=>{
// this.$refs.danmu.send({
// id : id,
// name : "昵稱" + id,
// content : "九月直播666"
// })
// id++;
// },3000)
},
methods:{
//關閉送禮物彈出層
closeGift(){
this.$refs.giftPopup.close()
},
//打開送禮物彈出層
openGift(){
this.$refs.giftPopup.open()
},
//關閉直播間,返回上一頁
back(){
uni.navigateBack({
delta: 1
})
},
openInput(){
this.$refs.input.open()
},
submit(){
//發送內容為空,提示框不消失
if(this.content == ""){
return;
}
//發送彈幕
this.$refs.danmu.send({
id : Math.random()*100,
name : "昵稱",
content : this.content
})
//清空輸入的內容
this.content = "";
//關閉輸入提示框
this.$refs.input.close()
}
}
}
</script>
<style>
.page{
flex : 1;
}
</style>
```
## 3.12.4 實現當點擊禮物的時候顯示對應的邊框的效果
```
<template>
<view class="page">
<!-- 直播內容 -->
<video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video>
<!-- 頭部 -->
<view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}">
<!-- 個人信息|觀看詳細信息 -->
<view class="px-2 flex justify-between" style="height:80rpx;">
<!-- 個人信息 -->
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<view class="p">
<image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
</view>
<!-- 昵稱與瀏覽量 -->
<view class="flex-1 flex flex-column justify-center">
<text class="text-white font">昵稱</text>
<text class="text-white font-sm">100</text>
</view>
<!-- 關注按鈕 -->
<view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;">
<text class="text-white">+</text>
</view>
</view>
<!-- 觀看情況 -->
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<!-- 觀看的用戶 -->
<scroll-view scroll-x="true" class="flex-1 flex">
<view class="p" v-for="(item,index) in 20" :key="index">
<image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
</view>
</scroll-view>
<!-- 觀看人數 -->
<view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;">
<text class="text-white font-sm">1000</text>
</view>
</view>
</view>
<!--金幣-->
<view class="px-2 my-2" style="height: 80rpx;">
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<view class="p">
<text class="text-warning">金幣</text>
</view>
<view class="flex-1 flex flex-column justify-center">
<text class="text-white font">100</text>
</view>
</view>
</view>
<!-- 禮物 -->
<f-gift ref="gift"></f-gift>
</view>
<!-- 彈幕 -->
<f-danmu ref="danmu"></f-danmu>
<!-- 底部評論..等 -->
<view class="position-fixed right-0 bottom-0 left-0 flex align-center justify-between" style="height: 120rpx;">
<view class="px-2" >
<view @click="openInput" 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 @click="openGift" 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 @click="back" 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>
<!-- 輸入框彈出層 -->
<uni-popup type="bottom" ref="input">
<view class="bg-white flex align-center px-3" style="height: 120rpx;">
<input placeholder="說點什么呢..." v-model="content" type="text" style="height: 80rpx;" class="border rounded flex-1 px-3 font-md">
<view :class="content == '' ? 'bg-main-disabled' : 'bg-main'" class=" flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit">
<text class="font text-white">發送</text>
</view>
</view>
</uni-popup>
<!-- 送禮物彈出層 -->
<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 @click="closeGift" 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 @click="giftActiveId = item.id" :class="item.id == giftActiveId ? 'border boder-main' : ''" v-for="(item,index) in gifts" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center">
<image :src="item.image" style="width: 100rpx; height: 100rpx;"></image>
<view class="flex mt-1">
<text class="text-warning font mr-1">{{item.name}}</text>
<text class="text-secondary font">{{item.coin}}</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>
</view>
</template>
<script>
import fGift from "@/components/live/f-gift.vue"
import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue"
import fDanmu from "@/components/live/f-danmu.vue"
import demoGifts from "@/demo/gifts.js"
export default {
data(){
return {
statusBarHeight : 0,
content : "",
gifts : [],
giftActiveId : 0
}
},
components: {
fGift,
uniPopup,
fDanmu
},
onLoad(){
//獲取通知欄的高度
let res = uni.getSystemInfoSync();
this.statusBarHeight = res.statusBarHeight;
//禮物數據
this.gifts = demoGifts;
},
mounted(){
//模擬發送禮物
setInterval(()=>{
this.$refs.gift.send({
username : "發送人",
avatar : "",
gift_name : "蛋糕",
gift_image : "/static/gift/3.png",
num : 1
})
},3000)
//模擬發送彈幕
// let id = 1;
// setInterval(()=>{
// this.$refs.danmu.send({
// id : id,
// name : "昵稱" + id,
// content : "九月直播666"
// })
// id++;
// },3000)
},
methods:{
//關閉送禮物彈出層
closeGift(){
this.$refs.giftPopup.close()
},
//打開送禮物彈出層
openGift(){
this.$refs.giftPopup.open()
},
//關閉直播間,返回上一頁
back(){
uni.navigateBack({
delta: 1
})
},
openInput(){
this.$refs.input.open()
},
submit(){
//發送內容為空,提示框不消失
if(this.content == ""){
return;
}
//發送彈幕
this.$refs.danmu.send({
id : Math.random()*100,
name : "昵稱",
content : this.content
})
//清空輸入的內容
this.content = "";
//關閉輸入提示框
this.$refs.input.close()
}
}
}
</script>
<style>
.page{
flex : 1;
}
</style>
```
## 3.12.5 實現發送禮物功能
```
<template>
<view class="page">
<!-- 直播內容 -->
<video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video>
<!-- 頭部 -->
<view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}">
<!-- 個人信息|觀看詳細信息 -->
<view class="px-2 flex justify-between" style="height:80rpx;">
<!-- 個人信息 -->
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<view class="p">
<image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
</view>
<!-- 昵稱與瀏覽量 -->
<view class="flex-1 flex flex-column justify-center">
<text class="text-white font">昵稱</text>
<text class="text-white font-sm">100</text>
</view>
<!-- 關注按鈕 -->
<view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;">
<text class="text-white">+</text>
</view>
</view>
<!-- 觀看情況 -->
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<!-- 觀看的用戶 -->
<scroll-view scroll-x="true" class="flex-1 flex">
<view class="p" v-for="(item,index) in 20" :key="index">
<image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image>
</view>
</scroll-view>
<!-- 觀看人數 -->
<view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;">
<text class="text-white font-sm">1000</text>
</view>
</view>
</view>
<!--金幣-->
<view class="px-2 my-2" style="height: 80rpx;">
<view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">
<view class="p">
<text class="text-warning">金幣</text>
</view>
<view class="flex-1 flex flex-column justify-center">
<text class="text-white font">100</text>
</view>
</view>
</view>
<!-- 禮物 -->
<f-gift ref="gift"></f-gift>
</view>
<!-- 彈幕 -->
<f-danmu ref="danmu"></f-danmu>
<!-- 底部評論..等 -->
<view class="position-fixed right-0 bottom-0 left-0 flex align-center justify-between" style="height: 120rpx;">
<view class="px-2" >
<view @click="openInput" 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 @click="openGift" 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 @click="back" 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>
<!-- 輸入框彈出層 -->
<uni-popup type="bottom" ref="input">
<view class="bg-white flex align-center px-3" style="height: 120rpx;">
<input placeholder="說點什么呢..." v-model="content" type="text" style="height: 80rpx;" class="border rounded flex-1 px-3 font-md">
<view :class="content == '' ? 'bg-main-disabled' : 'bg-main'" class=" flex ml-3 align-center py-2 rounded px-2 justify-center" @click="submit">
<text class="font text-white">發送</text>
</view>
</view>
</uni-popup>
<!-- 送禮物彈出層 -->
<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 @click="closeGift" 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 @click="giftActiveId = item.id" :class="item.id == giftActiveId ? 'border boder-main' : ''" v-for="(item,index) in gifts" :key="index" style="width: 187.5rpx; height: 175rpx;" class="flex flex-column justify-center align-center">
<image :src="item.image" style="width: 100rpx; height: 100rpx;"></image>
<view class="flex mt-1">
<text class="text-warning font mr-1">{{item.name}}</text>
<text class="text-secondary font">{{item.coin}}</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" @click="sendGift">發送</text>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import fGift from "@/components/live/f-gift.vue"
import uniPopup from "@/components/uni-ui/uni-popup/uni-popup.vue"
import fDanmu from "@/components/live/f-danmu.vue"
import demoGifts from "@/demo/gifts.js"
export default {
data(){
return {
statusBarHeight : 0,
content : "",
gifts : [],
giftActiveId : 0
}
},
components: {
fGift,
uniPopup,
fDanmu
},
onLoad(){
//獲取通知欄的高度
let res = uni.getSystemInfoSync();
this.statusBarHeight = res.statusBarHeight;
//禮物數據
this.gifts = demoGifts;
},
mounted(){
// //模擬發送禮物
// setInterval(()=>{
// this.$refs.gift.send({
// username : "發送人",
// avatar : "",
// gift_name : "蛋糕",
// gift_image : "/static/gift/3.png",
// num : 1
// })
// },3000)
//模擬發送彈幕
// let id = 1;
// setInterval(()=>{
// this.$refs.danmu.send({
// id : id,
// name : "昵稱" + id,
// content : "九月直播666"
// })
// id++;
// },3000)
},
methods:{
//發送禮物
sendGift(){
//如果要發送的禮物不存在,則不繼續往下執行,并給一個提示
if(this.giftActiveId == 0){
return uni.showToast({
title: "請選擇要發送的禮物",
icon : "none"
})
}
//查找出對應的禮物
let index = this.gifts.findIndex(item=> item.id == this.giftActiveId)
if(index == -1){
return;
}
let g = this.gifts[index];
//進行發送
this.$refs.gift.send({
username : "發送人",
avatar : "",
gift_name : g.name,
gift_image : g.image,
num : 1
})
//關閉送禮物彈出層
this.closeGift();
},
//關閉送禮物彈出層
closeGift(){
this.$refs.giftPopup.close()
},
//打開送禮物彈出層
openGift(){
this.$refs.giftPopup.open()
},
//關閉直播間,返回上一頁
back(){
uni.navigateBack({
delta: 1
})
},
openInput(){
this.$refs.input.open()
},
submit(){
//發送內容為空,提示框不消失
if(this.content == ""){
return;
}
//發送彈幕
this.$refs.danmu.send({
id : Math.random()*100,
name : "昵稱",
content : this.content
})
//清空輸入的內容
this.content = "";
//關閉輸入提示框
this.$refs.input.close()
}
}
}
</script>
<style>
.page{
flex : 1;
}
</style>
```
- 第一章 項目介紹和準備
- 1.1 課程介紹
- 1.2 環境搭建和項目創建
- 1.3 引入全局樣式
- 1.4 引入圖標庫
- 1.5 底部導航和凸起按鈕配置
- 第二章 首頁開發
- 2.1 首頁開發(一)
- 2.2 首頁開發(二)
- 第三章 直播間(用戶端)開發
- 3.1 基礎布局開發(一)
- 3.2 基礎布局開發(二)
- 3.3 個人信息和觀看情況
- 3.4 接收禮物組件(一) - 布局
- 3.5 接收禮物組件(二) - 自動滾動
- 3.6 接收禮物組件(三) - 自動消失
- 3.7 底部操作條
- 3.8 彈幕組件開發(一) - 輸入框彈出層
- 3.9 彈幕組件開發(二) - 置于底部功能
- 3.10 彈幕組件開發(三) - 發送彈幕
- 3.11 送禮物彈框組件(一) - 布局
- 3.12 送禮物彈框組件(二) - 功能
- 第四章 充值金幣頁開發
- 4.1 充值金幣頁開發(一)
- 4.2 充值金幣頁開發(二)
- 第五章 直播間(主播端)開發
- 5.1 創建直播頁 - 推流組件
- 5.2 創建直播頁 - 布局(一)
- 5.3 創建直播頁 - 布局(二)
- 5.4 創建直播頁 - 鏡頭反轉
- 5.5 創建直播頁 - 切換畫質
- 5.6 創建直播頁 - 美顏和美白
- 5.7 關于退出創建直播頁黑邊問題
- 5.8 主播直播間(一)
- 5.9 主播直播間(二)
- 第六章 個人中心頁面開發
- 6.1 個人中心頁
- 第七章 egg.js基礎
- 第八章 后臺管理系統開發
- 8.1 創建項目和基礎配置
- 第九章 交互和部署上線
- 9.1 登錄注冊交互實現
- 9.2 個人中心交互實現
- 9.3 退出登錄以及初始化用戶信息
- 9.5 權限驗證
- 9.6 首頁交互 - 上拉加載與下拉刷新
- 9.7 創建訂單和微信支付(一)
- 9.8 創建訂單和微信支付(二)
- 9.9 微信支付調試和充值頁交互
- 9.10 直播間交互
- 9.11 socket.io安裝與通訊(一)
- 9.12 socket.io安裝和通訊(二)
- 9.13 加入直播間(一)
- 9.14 加入直播間(二)
- 9.15 加入直播間(三)
- 9.16 離開直播間
- 9.17 直播間實時在線用戶列表
- 9.18 直播間實時彈幕功能
- 9.19 直播間送禮物功能
- 9.20 創建直播功能交互(一)
- 9.21 創建直播功能交互(二)
- 9.22 優化前端部分問題(一)
- 9.23 優化前端部分問題(二)
- 第七章 登錄注冊頁面開發