<script> // 引入商品广告、评论 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>
在项目开发过程中，遇到了视频video层级高不能覆盖的问题，使用nvue页面就可以解决view覆盖在video之上。.nvue(native vue的缩写)
更多关于nvue页面开发，可以参看：
◆ uniapp聊天页面实现
项目中的聊天页面，功能效果这里就不详细介绍了，可参看这篇：uni-app聊天室|vue+uniapp仿微信聊天实例
◆ 直播页面live.nvue
为避免video不能覆盖问题，直播页面采用的是nvue编写，开发过程也遇到了一些坑，尤其是css，全部是flex布局，而且不能多级嵌套，有些css属性不支持。
<template> <div> <view> <swiper :indicator-dots="false" :vertical="false" :current="videoIndex" @change="handleSlider"> <swiper-item v-for="(item, index) in vlist" :key="index"> <!-- //直播区 --> <view> <video :id="'myVideo' + index" :ref="'myVideo' + index" :src="item.src" :autoplay="index == videoIndex" :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}"> </video> <!-- //顶部 --> <view :style="{ height: headerBarH, 'padding-top': statusBarH }"> ... </view> <!-- //排名信息 --> <view :style="{top: headerBarH}"> <view> <text>总排名{{item.allRank}}</text> <text v-if="item.hourRank">小时榜第{{item.hourRank}}名</text> </view> <text>U直播:{{item.uid}}</text> </view> <!-- //底部信息栏 --> <view> <!-- 送礼物提示 --> <view> ... </view> <!-- 滚动msg信息 --> <scroll-view scroll-y show-scrollbar="false"> <block v-for="(msgitem, msgidx) in item.rollmsg" :key="msgidx"> <view><view><text>{{msgitem.uname}}</text> <text>{{msgitem.content}}</text></view></view> </block> </scroll-view> <view> <view @tap="handleRollMsg(index)"><text>说点什么...</text></view> <view> ... <view v-if="item.cart" @tap="handleLiveCart(index)"><text></text></view> <view @tap="handleLiveGift"><text></text></view> ... </view> </view> </view> </view> </swiper-item> </swiper> </view> <!-- 商品广告、滚动消息、礼物 --> <live-cart ref="liveCart" :vlist="vlist" /> <roll-msg ref="rollMsg" :vlist="vlist" /> <live-gift ref="liveGift" /> </div> </template>
另外引入阿里字体图标也需注意：通过weex方式引入