Uni直播是一个运用uni-app+nvue+vuex等技术实现的类似抖音/陌陌功能的直播聊天室项目，功能效果类似陌陌直播上下滑动切换，有聊天/礼物/评论等功能。
预览效果
如上图：可编译到多端，在小程序/H5端/App端效果基本一致
技术栈
- 编辑器+技术：HBuilderX2.3.9 + vue/NVue/uniapp/vuex
- iconfont 图标：阿里字体图标库
- 自定义导航栏 + 底部 Tabbar
- 弹窗组件：uniPop （ uni-app 封装自定义 Modal 弹窗）
- 测试环境：H5 端 /微信小程序 /App 端 /真机
项目中的聊天部分，可参看这篇：uniapp 聊天室 App|vue+uniapp 仿微信聊天界面|仿微信朋友圈
uniapp实现抖音效果
uni-app+nvue 技术实现仿抖音界面滑动效果，且有点赞、评论及商品等功能，可以单击、双击判断。
<swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;">
<block v-for="(item,index) in vlist" :key="index">
<swiper-item>
<view class="uni_vdplayer">
<video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src"
:controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">
</video>
<!-- 中间播放按钮 -->
<view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view>
<!-- 底部信息 -->
<view class="vd-footToolbar flexbox flex_alignb">
<view class="vd-info flex1">
<view class="item at">
<view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">＃</text> {{kwItem}}</view>
</view>
<view class="item subtext">{{item.subtitle}}</view>
<view class="item uinfo flexbox flex_alignc">
<image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text>
</view>
<view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view>
</view>
<view class="vd-sidebar">
<view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view>
<view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view>
<view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view>
<view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>/**
* @desc 小视频JSON数据
* @about Q:282310962
*/
module.exports = [
...
{
avator: '/static/uimg/u__chat_img5.jpg',
poster: '/static/placeholder/video-img2.jpg',
src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTY3NTU3MzYzMTQ_zh_4.mp4',
author: '往后余生都是你',
subtitle: '能不能给我一首歌的时间，让你拾起从前的快乐',
keyword: '',
playNum: 7268,
likeNum: 3438,
replyNum: 1105,
shareNum: 327,
islike: false,
attention: false,
cart: [
{
name: 'YCID施蒂蓝玫瑰凝养柔滑唇膏',
image: 'https://cbu01.alicdn.com/img/ibank/2019/218/182/12384281812_1493014487.jpg',
price: 7.70
},
{
name: '玛可安迪新款抖音网红推荐口红',
image: 'https://cbu01.alicdn.com/img/ibank/2019/285/249/10457942582_1068990292.jpg',
price: 19.9
},
]
},
...
]<script>
const videoJson = require('./mock-video.js')
// 引入商品广告、评论
import videoCart from '@/components/cp-video/cart.vue'
import videoComment from '@/components/cp-video/comment'
let timer = null
export default {
data() {
return {
videoIndex: 0,
vlist: videoJson,
isPlay: true, //当前视频是否播放中
clickNum: 0, //记录点击次数
}
},
components: {
videoCart, videoComment
},
onLoad(option) {
this.videoIndex = parseInt(option.index)
},
onReady() {
this.init()
},
methods: {
init() {
this.videoContextList = []
for(var i = 0; i < this.vlist.length; i++) {
// this.videoContextList.push(this.$refs['myVideo' + i][0])
this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
}
setTimeout(() => {
this.play(this.videoIndex)
}, 200)
},
// 滑动切换
handleSlider(e) {
let curIndex = e.detail.current
if(this.videoIndex >= 0){
this.videoContextList[this.videoIndex].pause()
this.videoContextList[this.videoIndex].seek(0)
this.isPlay = false
}
if(curIndex === this.videoIndex + 1) {
this.videoContextList[this.videoIndex + 1].play()
this.isPlay = true
}else if(curIndex === this.videoIndex - 1) {
this.videoContextList[this.videoIndex - 1].play()
this.isPlay = true
}
this.videoIndex = curIndex
},
// 播放
play(index) {
this.videoContextList[index].play()
this.isPlay = true
},
// 暂停
pause(index) {
this.videoContextList[index].pause()
this.isPlay = false
},
// 点击视频事件
handleClicked(index) {
if(timer){
clearTimeout(timer)
}
this.clickNum++
timer = setTimeout(() => {
if(this.clickNum >= 2){
console.log('双击视频')
}else{
console.log('单击视频')
if(this.isPlay){
this.pause(index)
}else{
this.play(index)
}
}
this.clickNum = 0
}, 300)
},
// 喜欢
handleIsLike(index){
let vlist = this.vlist
vlist[index].islike =! vlist[index].islike
this.vlist = vlist
},
// 显示评论
handleVideoComment() {
this.$refs.videoComment.show()
},
// 显示购物车
handleVideoCart(index) {
this.$refs.videoCart.show(index)
},
}
}
</script>到这里就介绍差不多了，后续会继续分享项目实例，希望有一些帮助吧。
