优化首页视频播放逻辑
This commit is contained in:
zyronon
parent
273c301c61
commit
dc4c1c4fb1
@ -29,23 +29,23 @@
|
||||
</div>
|
||||
<div class="love mb15p" @click.stop="loved($event)">
|
||||
<div>
|
||||
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!video.isLoved">
|
||||
<img src="../assets/img/icon/love.svg" class="love-image" v-if="!lVideo.isLoved">
|
||||
<img src="../assets/img/icon/loved.svg" class="love-image" v-else>
|
||||
<!-- <transition name="love">-->
|
||||
<!-- </transition>-->
|
||||
<!-- <transition name="loved">-->
|
||||
<!-- </transition>-->
|
||||
</div>
|
||||
<span>{{ video.loves }}</span>
|
||||
<span>{{ lVideo.loves }}</span>
|
||||
</div>
|
||||
<!-- <div class="message mb15p" @click.stop="$emit('showComments')">-->
|
||||
<div class="message mb15p" @click.stop="showComment">
|
||||
<div class="message mb15p" @click.stop="$emit('showComments')">
|
||||
<!-- <div class="message mb15p" @click.stop="showComment">-->
|
||||
<img src="../assets/img/icon/message.svg" alt="" class="message-image">
|
||||
<span>{{ video.comments }}</span>
|
||||
<span>{{ lVideo.comments }}</span>
|
||||
</div>
|
||||
<div v-if="!isMy" class="share mb35p" @click.stop="$emit('showShare')">
|
||||
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
|
||||
<span>{{ video.shared }}</span>
|
||||
<span>{{ lVideo.shared }}</span>
|
||||
</div>
|
||||
<div v-else class="share mb35p" @click.stop="$emit('showShare')">
|
||||
<img src="../assets/img/icon/share.svg" alt="" class="share-image">
|
||||
@ -192,7 +192,8 @@ export default {
|
||||
point: null,
|
||||
isMove: false,
|
||||
currentVideoId: 'a' + Date.now(),
|
||||
test: [1, 2]
|
||||
test: [1, 2],
|
||||
lVideo: this.video
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -215,10 +216,10 @@ export default {
|
||||
video.removeEventListener('timeupdate', fun)
|
||||
}
|
||||
})
|
||||
video.addEventListener('play', e=>{
|
||||
video.addEventListener('play', e => {
|
||||
this.isPlaying = true
|
||||
})
|
||||
video.addEventListener('pause', e=>{
|
||||
video.addEventListener('pause', e => {
|
||||
this.isPlaying = false
|
||||
})
|
||||
},
|
||||
@ -272,12 +273,8 @@ export default {
|
||||
},
|
||||
|
||||
loved(e, index) {
|
||||
// console.log(e)
|
||||
// let temp = this.$clone(this.video)
|
||||
let temp = globalMethods.$clone(this.video)
|
||||
temp.isLoved = !temp.isLoved
|
||||
this.$emit('update:video', temp)
|
||||
this.$emit('videoTest', {item: temp, index: this.index})
|
||||
this.lVideo.isLoved = !this.lVideo.isLoved
|
||||
this.$emit('update:video', this.lVideo)
|
||||
},
|
||||
move(e) {
|
||||
this.isMove = true
|
||||
|
||||
@ -151,14 +151,14 @@ export default {
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
videoActiveIndex: 0,
|
||||
render: (item, itemIndex, slideItemIndex) => {
|
||||
render: (item, itemIndex) => {
|
||||
return (
|
||||
<div className="base-slide-item" data-index={itemIndex}>
|
||||
<Video1 disabled={itemIndex !== 0}
|
||||
video={item}
|
||||
index={itemIndex}
|
||||
onShowShare={this.t}
|
||||
onVideoTest={this.t}
|
||||
onShowComments={e => this.isCommenting = true}
|
||||
onShowShare={e => this.isSharing = true}
|
||||
v-model={[this.videos[itemIndex], 'video']}
|
||||
/>
|
||||
</div>
|
||||
@ -230,7 +230,8 @@ export default {
|
||||
comments: 666,
|
||||
shared: 999,
|
||||
duration: 99
|
||||
},].map(v => {
|
||||
},
|
||||
].map(v => {
|
||||
this.videos.push(v)
|
||||
})
|
||||
|
||||
@ -243,11 +244,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
t(e) {
|
||||
console.log(this.videoActiveIndex)
|
||||
this.$refs.ssss.update(e.index)
|
||||
// console.log(this.videos)
|
||||
// this.isSharing = !this.isSharing
|
||||
// console.log(111)
|
||||
console.log(e)
|
||||
},
|
||||
|
||||
|
||||
@ -86,6 +86,7 @@ export default {
|
||||
toolbarStyleTransitionDuration: 0,
|
||||
homeLoadingMoveYDistance: 0,//homeLoading专用的MoveYDistance，因为MoveYDistance是一直更新的，左右划的时候也在更新，会造成
|
||||
//在往左划，但上面的toolbar开始往下移了，所以需要用一个专用的值来有条件的保存MoveYDistance，即只direction = row的时候
|
||||
appInsMap: new Map()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -116,6 +117,7 @@ export default {
|
||||
mounted: async function () {
|
||||
await this.checkChildren(true)
|
||||
this.list.slice(0, 3).map((item, index) => {
|
||||
|
||||
this.slideList.appendChild(this.getInsEl(item, index))
|
||||
})
|
||||
// await this.checkChildren(true)
|
||||
@ -123,12 +125,8 @@ export default {
|
||||
// this.changeIndex(true)
|
||||
},
|
||||
methods: {
|
||||
update(index) {
|
||||
let newEl = this.getInsEl(this.list[index], index)
|
||||
$(`.base-slide-item[data-index=${index}]`).find('.float-container').replaceWith($(newEl).find('.float-container'))
|
||||
},
|
||||
getInsEl(v, index) {
|
||||
let slideVNode = this.renderSlide(v, index, this.currentSlideItemIndex)
|
||||
getInsEl(item, index) {
|
||||
let slideVNode = this.renderSlide(item, index)
|
||||
const app = Vue.createApp({
|
||||
render() {
|
||||
return slideVNode
|
||||
@ -136,6 +134,7 @@ export default {
|
||||
})
|
||||
const parent = document.createElement('div')
|
||||
const ins = app.mount(parent)
|
||||
this.appInsMap.set(index, app)
|
||||
return ins.$el
|
||||
},
|
||||
t() {
|
||||
@ -272,6 +271,7 @@ export default {
|
||||
if (this.currentSlideItemIndex > 2) {
|
||||
let item = this.list[this.currentSlideItemIndex + 2]
|
||||
this.slideList.appendChild($(this.getInsEl(item, this.currentSlideItemIndex + 2))[0])
|
||||
// this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index')).unmount()
|
||||
$("#base-slide-list .base-slide-item:first").remove()
|
||||
$(".base-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
|
||||
@ -281,6 +281,7 @@ export default {
|
||||
if (this.currentSlideItemIndex > 1) {
|
||||
let item = this.list[this.currentSlideItemIndex - 2]
|
||||
this.slideList.prepend($(this.getInsEl(item, this.currentSlideItemIndex - 2))[0])
|
||||
// this.appInsMap.get($("#base-slide-list .base-slide-item:last").data('index')).unmount()
|
||||
$("#base-slide-list .base-slide-item:last").remove()
|
||||
$(".base-slide-item").each(function () {
|
||||
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user