一緒に書く習慣をつけましょう!「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して9日目です。クリックしてイベントの詳細をご覧ください。
1.ビデオスライドを監視する
スワイパー@change="change"
に追加します。今回は、スワイプを完了し、メソッドの下に変更イベントを追加して、結果を出力した後に実行されます。
change(res){
console.log(res);
}
复制代码
その中にres.detail.current
は現在のページ番号が表示されますスライド方向も監視できる@touchstart="touchStart"
ので@touchend="touchEnd"
、タッチスクリーンの最初と最後でそれぞれ実行されるとの監視を増やします
上にスライドすると、つまり最初のビデオから2番目のビデオにフリップすると、pageYが小さくなっている ことがわかり、これに基づいて上下のスライド方向を判断できます。
だから私たちはコードを書きます
<template>
<view class="videoList">
<view class="video-box">
<swiper class="swiper" :vertical="true" @change="change" @touchstart="touchStart" @touchend="touchEnd">
<swiper-item v-for="item of list" :key="item.id">
<view class="swiper-item">
<videoPlayer :video="item"></videoPlayer>
</view>
<view class="left-box">
<listLeft></listLeft>
</view>
<view class="right-box">
<listRight></listRight>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import videoPlayer from './videoPlayer.vue'
import listLeft from './listLeft.vue'
import listRight from './listRight.vue'
var time = null
export default {
props: ["myList"],
components: {
videoPlayer,
listLeft,
listRight
},
name: "video-list",
data() {
return {
list: [],
pageStartY: 0,
pageEndY: 0
};
},
methods: {
change(res) {
clearTimeout(time)
time = setTimeout(() => {
if (this.pageStartY > this.pageEndY) {
console.log("向上滑动")
this.pageStartY = 0
this.pageEndY = 0
} else {
console.log("向下滑动");
this.pageStartY = 0
this.pageEndY = 0
}
},1)
},
touchStart(res) {
this.pageStartY = res.changedTouches[0].pageY;
console.log(this.pageStartY);
},
touchEnd(res) {
this.pageEndY = res.changedTouches[0].pageY;
console.log(this.pageEndY);
}
},
watch: {
myList() {
this.list = this.myList;
}
}
}
</script>
<style>
.videoList {
width: 100%;
height: 100%;
}
.video-box {
width: 100%;
height: 100%;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-item {
width: 100%;
height: 100%;
z-index: 19;
}
.left-box {
z-index: 20;
position: absolute;
bottom: 50px;
left: 10px;
}
.right-box {
z-index: 20;
position: absolute;
bottom: 50px;
right: 10px;
}
</style>
复制代码
ログログを表示する
コードの実行順序はtouchStart
-> change
->toucheEnd
であるためchagne
、メソッドでpageStartYとpageEndYを使用して上下のスライド方向を判断するには、1msの遅延のタイマーが必要であるため、実行順序はtouchStart
-> toucheEnd
->change
となり、 pageStartYとpageEndYの両方が完了しました割り当て後、判断できます
2.再生して一時停止します
最初のビデオから2番目のビデオにスワイプすると、最初のビデオが一時停止され、2番目のビデオの再生が開始されます。コードのこの部分をvideoPlayer.vueに記述します
onReady() {
this.videoContext = uni.createVideoContext("myVideo",this)
},
methods:{
playVideo(){
this.videoContext.seek(0)
this.videoContext.play()
console.log("播放视频");
},
pauseVideo(){
this.videoContext.pause()()
console.log("暂停视频");
}
}
复制代码
次に行うことは、親コンポーネントが子コンポーネントを呼び出し、videoList.vueを変更し、それにvideoPlayerを追加する方法を解決することです。ref
<videoPlayer ref="player" :video="item"></videoPlayer>
复制代码
然后通过 this.$refs.player
可以找到 videoPlayer 这个插件,由于是个数组,所以通过 page 来找到当前页。当第一个视频滑动到第二个视频,第一个视频应该暂停,第二个应该自动播放,也就是上滑的情况。下滑的情况则相反,因此完善代码:
data() {
return {
......
page:0
};
},
methods: {
change(res) {
clearTimeout(time)
this.page = res.detail.current
time = setTimeout(() => {
if (this.pageStartY > this.pageEndY) {
console.log("向上滑动"+this.page);
this.$refs.player[this.page].playVideo()
this.$refs.player[this.page-1].pauseVideo()
this.pageStartY = 0
this.pageEndY = 0
} else {
console.log("向下滑动"+this.page);
this.$refs.player[this.page].playVideo()
this.$refs.player[this.page+1].pauseVideo()
this.pageStartY = 0
this.pageEndY = 0
}
},1)
},
......
},
复制代码
查看效果:
3、增加播放、暂停视频功能
增加一个点击视频进行播放、暂停的功能。给 videoPlayer 增加一个点击事件
<template>
<view class="videoPlayer">
<video id="myVideo" @click="click"
class="video" :controls="false" :loop="true" :src="video.src"></video>
</view>
</template>
<script>
export default {
props:['video'],
name: "videoPlayer",
data() {
return {
play:false
};
},
onReady() {
this.videoContext = uni.createVideoContext("myVideo",this)
},
methods:{
click(){
if(this.play === false){
this.playthis()
}else{
this.pauseVideo()
}
},
playVideo(){
if(this.play === false){
this.videoContext.seek(0)
this.videoContext.play()
this.play = true
}
},
pauseVideo(){
if(this.play === true){
this.videoContext.pause()
this.play = false
}
},
playthis(){
if(this.play === false){
this.videoContext.play()
this.play = true
}
}
}
}
</script>
......
复制代码
4、增加双击点赞
双击方法直接在 videoPlayer.vue 的 click() 方法上修改:
data() {
return {
......
dblClick: false
};
},
......
methods: {
click() {
clearTimeout()
this.dblClick = !this.dblClick
timer = setTimeout(() => {
//300ms之内dblClick为true为单击
if (this.dblClick) {
//单击
if (this.play === false) {
this.playthis()
} else {
this.pauseVideo()
}
} else {
//双击
this.$emit("doubleClick")
}
this.dblClick = false
}, 300)
},
......
}
复制代码
另外由于爱心写在 listRight.vue,所以在 listRight.vue 中增加一个方法
change() {
this.color = 'color: red;'
}
复制代码
没有复用 changeColor() 方法,因为双击点赞,再双击并不会取消点赞,跟直接单击爱心图标是不一样的
videoPlayer.vue 双击时,子组件向父组件传值使用了 this.$emit("doubleClick")
,我们需要在 video-list.vue 中增加 doubleClick() 方法
<listRight ref="right"></listRight>
doubleClick(){
//点赞,调用 listRight 中方法
this.$refs.right[0].change()
}
复制代码
当双击屏幕,爱心变红,再次双击,爱心不会改变 单击爱心,取消点赞
5、控制首个视频自动播
思路:判断是否为第一个视频,然后修改 videoPlayer 的 autoplay 属性
修改 video-list.vue,在循环时,给 videoPlayer 传一个 index
<swiper-item v-for="(item,index) of list" :key="item.id">
<view class="swiper-item">
<videoPlayer @doubleClick="doubleClick" ref="player"
:video="item" :index="index"></videoPlayer>
</view>
......
</swiper-item>
复制代码
videoPlayer.vue 中接收 index 传值,判断如果是 0,改变 autoPlay 的值
<template>
<view class="videoPlayer">
<video id="myVideo" @click="click"
class="video" :controls="false" :loop="true"
:src="video.src" :autoplay="autoPlay"></video>
</view>
</template>
<script>
var timer = null
export default {
props: ['video','index'],
name: "videoPlayer",
data() {
return {
......
autoPlay:false
};
},
......
methods: {
......
auto(){
if(this.index === 0){
this.autoPlay = true
}
}
},
created() {
this.auto()
}
}
</script>
......
复制代码
6、动态渲染视频信息
index.vue 中获取数据后,通过 myList 将数据传递给了 video-list.vue,在 video-list.vue 中接收了 myList 的数据,然后通过循环展示了视频数据,所以展示左侧和右侧的数据,只需要将循环的每项 item 传给 listLeft 和 listRight 即可
<view class="left-box">
<listLeft :item='item'></listLeft>
</view>
<view class="right-box">
<listRight ref="right" :item='item'></listRight>
</view>
复制代码
然后分别在 listLeft 和 listRight 中接收后,展示数据
<template>
<view class="listLeft">
<view class="author">
{{item.author}}
</view>
<view class="title">
{{item.title}}
</view>
<view class="box">
<view class="music">
@我们的恋爱是对生命的严重浪费@
</view>
</view>
</view>
</template>
<script>
export default {
props:['item'],
name:"listLeft",
data() {
return {
};
}
}
</script>
......
复制代码
listRight.vue
<template>
<view class="listRight">
......
<view class="number">{{item.loveNumber}}</view>
......
<view class="number">{{item.commentNumber}}</view>
......
<view class="number">{{item.shareNumber}}</view>
......
</view>
</template>
<script>
export default {
props:['item'],
......
}
</script>
......
复制代码