diff --git a/src/components/Video.vue b/src/components/Video.vue index 934b36f..4449253 100644 --- a/src/components/Video.vue +++ b/src/components/Video.vue @@ -29,23 +29,23 @@
- +
- {{ video.loves }} + {{ lVideo.loves }}
- -
+
+ - {{ video.comments }} + {{ lVideo.comments }}
- {{ video.shared }} + {{ lVideo.shared }}
@@ -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 diff --git a/src/pages/home/Index2.vue b/src/pages/home/Index2.vue index 4bd1b8a..ca62b54 100644 --- a/src/pages/home/Index2.vue +++ b/src/pages/home/Index2.vue @@ -151,14 +151,14 @@ export default { isCommenting: false, isSharing: false, videoActiveIndex: 0, - render: (item, itemIndex, slideItemIndex) => { + render: (item, itemIndex) => { return (
this.isCommenting = true} + onShowShare={e => this.isSharing = true} v-model={[this.videos[itemIndex], 'video']} />
@@ -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) }, diff --git a/src/pages/home/SlideListVirtual.vue b/src/pages/home/SlideListVirtual.vue index 2400253..65d5b7a 100644 --- a/src/pages/home/SlideListVirtual.vue +++ b/src/pages/home/SlideListVirtual.vue @@ -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)