一、前情回顾
uni-app开发一个小视频应用(一)
上篇文章,我们已经实现了首页的头部导航栏组件、底部的tabBar导航栏组件、中间的视频列表组件以及视频列表组件中的视频播放组件,传入视频列表渲染后已经可以上下滑动进行视频切换和播放,接下来我们将完成首页的剩余部分,左侧信息栏组件、右侧图标栏组件,以及完善视频切换动画、播放控制等功能。
二、创建左侧信息栏组件
左侧的信息栏组件,主要分三块:?作者名、视频标题名、音乐名。这个左侧信息栏信息是和当前播放视频相关联的,所以应该在循环视频列表的时候,将左侧信息栏组件一起渲染出来,所以左侧信息栏组件应该加到<swiper-item>中。
// components/list-left.vue
<template>
<view class="list-left">
"author">
@祝晓晗
</view>
"title">
妈呀,遇到老同学了,缘分呐! @老丈人说车 @抖音小助手
"music-box">
"music">
@祝晓晗创作的原声 @祝晓晗创作的原声
</view>
</view>
</template>
<style scoped>
.list-left{
width: 70%;
height: 120px;
color: white;
}
.author {
height: 35px;
line-height: 35px;
font-size: 17px;
}
.title {
width: 100%;
line-height: 25px;
font-size: 12px;
word-wrap: break-word;
color: #FFFAF0;
}
.music-box {
overflow: hidden;
width: 70%;
}
.music {
width: 200%;
height: 35px;
line-height: 35px;
font-size: 12px;
animation: scroll-x 5s linear 0.2s infinite;
}
@keyframes scroll-x{
0% {
transform: translate3d(80%,0);
}
100% {
transform: translate3d(-80%,136);"><!--动画结束后到达-80%位置-->
}
}
</style>
// components/video-list.vue
三、创建右侧图标栏组件
右侧图标栏组件,主要分为:?头像图标(头像设置border-radius)、收藏图标(iconfont图标)、评论图标(iconfont图标)、分享图标(iconfont图标)、音乐图标(图片设置border-radius),右侧图标栏组件设置一个固定宽度,然后让各种图标依次排列即可,如:
// components/list-right.vue
四、给右侧图标组件添加上相应的事件
当点击头像下部的加号图标,可以对该用户进行关注,即隐藏加号图标,还有就是收藏爱心图标颜色切换,当点击收藏爱心图标,爱心图标变成红色,再次点击收藏爱心图标,爱心图标变回白色,这里先只处理颜色的变化,具体后台交互暂不处理。
// 在头像图标下方通过绝对定位添加一个加号图标,并定位到头像底部
五、实现滑动播放功能
所谓滑动播放,即向上滑动的时候,暂停当前播放视频并且播放下一个视频,向下滑动的时候,暂停当前播放视频,播放上一个视频,而这最关键的就是如何判断是向上滑动还是向下滑动。<swiper>组件给我们提供了一个change事件,我们可以监听这个change事件,拿到滑动完成后滑动到了第几页,即<swiper-item>的序号(从0开始),然后与滑动前的当前page相比较,就可以知道是向上滑还是向下滑了。 判断好了是上滑还是下滑后,我们还需要对上滑和下滑作出正确的处理,我们需要能够拿到每个视频播放组件,然后调用视频播放组件上的相关方法对播放进行控制,这就是涉及到了父组件如何调用子组件上方法,父组件要想调用子组件上的方法,关键是父组件要能够拿到子组件对象,我们可以通过ref实现,因为每一个视频播放组件是video-list视频列表组件的一个子组件,所以我们可以在video-list视频列表组件中给每一个video-player视频播放组件添加上一个ref="player",即可拿到对应的视频播放组件了。
// components/video-list.vue
<swiper class="swiper" :vertical="true" @change="slider">
"index">
"swiper-item">
<video-player
ref="players" <!--给每一个视频播放组件添加一个ref标识-->
:video="item"
:index="index">
</video-player>
</swiper>
<script>
export default {
data() {
return {
currentPage: 0
}
},methods: {
slider(e) {
const targetPage = e.detail.current;
if (targetPage === this.currentPage + 1) {
console.log("向上滑动");
this.$refs.players[this.currentPage + 1].playFromHead();
this.$refs.players[this.currentPage].pause();
} else if(targetPage === this.currentPage - "向下滑动");
this.$refs.players[this.currentPage - // 上一个开始播放并且从头开始播放
this.$refs.players[this.currentPage].pause();
}
this.currentPage = targetPage;
}
}
}
</script>
需要注意的是,this.$refs.players返回的是一个数组,即所有播放组件的实例,我们通过不同的索引即可取得对应的视频播放组件,然后进行相应的播放控制了,接下来就是要给每一个视频播放组件添加上播放控制的方法,我们需要给<video>组件添加上一个id,然后通过这个id可以创建出video上下文,即可调用play()、pause()、seek()等相关方法对播放进行控制。
// components/video-player.vue
<template>
<view class="video-player">
<video class="video"
id="myVideo" <!--给video组件添加一个id,以便获取到video上下文对象-->
:src= "video.src"
:controls="false"
:loop="true">
</video>
</view>
</template>
<script>
export default {
onReady() {
this.videoContext = uni.createVideoContext("myVideo",this);
},methods: {
play() {
this.videoContext.play();
},pause() {
this.videoContext.pause();
},playFromHead() {
this.videoContext.seek(0);
this.play();
}
}
}
</script>
六、实现单击播放暂停切换以及双击关注用户功能
要想实现单击视频播放组件,视频可以进行播放和暂停切换,那么我们需要给视频播放组件添加一个isPlay属性表示视频是否处于播放中,如果是播放中,那么点击就暂停,如果不是播放中,那么点击就播放,同时,由于uni-app不支持vue的dblclick事件的,所以我们还需要对单击和双击操作进行判断,我们需要定义一个变量用于记录用户点击次数,如果300ms内用户点击次数大于等于2,那么就是双击,否则就是单击,如:
双击的时候会向video-list父组件(视频列表组件)发送一个follow事件,video-list组件监听到follow事件后再通知<list-right>组件调用其方法让其爱心图标变红即可,如:
七、实现首个视频自动播放功能
之前我们的视频播放组件接收了一个index属性,即当前视频对应的索引号,我们可以通过这个索引号判断当前视频是否是第一个,然后将其video组件的autoPlay设置为true即可自动播放。
至此,首页已经完成,效果图如下:
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|