基于vue+uniapp直播室实例|仿陌陌/抖音效果

简介: Uni直播是一个运用uni-app+nvue+vuex等技术实现的类似抖音/陌陌功能的直播聊天室项目,功能效果类似陌陌直播上下滑动切换,有聊天/礼物/评论等功能。预览效果如上图:可编译到多端,在小程序/H5端/App端效果基本一致技术栈编辑器+技术:HBuilderX2.

Uni直播是一个运用uni-app+nvue+vuex等技术实现的类似抖音/陌陌功能的直播聊天室项目,功能效果类似陌陌直播上下滑动切换,有聊天/礼物/评论等功能。

预览效果

_1
如上图:可编译到多端,在小程序/H5端/App端效果基本一致

技术栈

  • 编辑器+技术:HBuilderX2.3.9 + vue/NVue/uniapp/vuex
  • iconfont 图标:阿里字体图标库
  • 自定义导航栏 + 底部 Tabbar
  • 弹窗组件:uniPop ( uni-app 封装自定义 Modal 弹窗)
  • 测试环境:H5 端 /微信小程序 /App 端 /真机

02360_20191111085849115
003360_20191111085953100
005360_20191111090127387
007360_20191111090358843
008360_20191111090458874
011360_20191111090714051
014360_20191111091211763
016360_20191111091413995
019360_20191111091708858
024360_20191111092355113
028360_20191111093136985
029360_20191111093508445
030360_20191111093717996
031360_20191111093813768
033360_20191111094018739
037360_20191111095943884

项目中的聊天部分,可参看这篇:uniapp 聊天室 App|vue+uniapp 仿微信聊天界面|仿微信朋友圈

uniapp实现抖音效果

uni-app+nvue 技术实现仿抖音界面滑动效果,且有点赞、评论及商品等功能,可以单击、双击判断。

360_20191113005730822

<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>

到这里就介绍差不多了,后续会继续分享项目实例,希望有一些帮助吧。

目录
相关文章
|
11天前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
103 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
2月前
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
2月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线招聘平台的详细设计和实现(源码+lw+部署文档+讲解等)