diff --git a/src/components/BVideo.vue b/src/components/BVideo.vue index be6b400..1d24d07 100644 --- a/src/components/BVideo.vue +++ b/src/components/BVideo.vue @@ -97,6 +97,7 @@
60) { - // if (this.duration > 6) { + // if (this.duration > 6) { this.step = this.width / Math.floor(this.duration) video.addEventListener('timeupdate', fun) } @@ -271,9 +272,9 @@ export default { this.play() //这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下 this.isSingleClick = true - setTimeout(()=>{ + setTimeout(() => { this.isSingleClick = false - },300) + }, 300) } this.loading = false }) diff --git a/src/pages/slide/IndicatorHome.vue b/src/pages/slide/IndicatorHome.vue index 8d64219..b125c3c 100644 --- a/src/pages/slide/IndicatorHome.vue +++ b/src/pages/slide/IndicatorHome.vue @@ -52,7 +52,7 @@ export default { Loading, }, props: { - modelValue: false, + loading: false, //用于和slidList绑定，因为一个页面可能有多个slidList，但只有一个indicator组件 name: { type: String, @@ -69,7 +69,6 @@ export default { lefts: [], indicatorSpace: 0, open: false, - loading: false, type: 1, moveY: 0 } @@ -128,13 +127,6 @@ export default { this.moveY = e }) bus.on(this.name + '-end', this.end) - bus.on(this.name + '-loading', () => { - console.log('loading') - this.loading = true - setTimeout(() => { - this.loading = false - }, 3000) - }) }, methods: { toggleType(type) { diff --git a/src/pages/slide/Slide.vue b/src/pages/slide/Slide.vue index ab2b6b3..cdf1d6c 100644 --- a/src/pages/slide/Slide.vue +++ b/src/pages/slide/Slide.vue @@ -4,6 +4,7 @@
@@ -54,8 +55,26 @@

2

+ +
@@ -73,6 +92,22 @@ import SlideVerticalInfinite from "./SlideVerticalInfinite"; import Comment from "../../components/Comment"; import enums from "../../utils/enums"; import bus from "../../utils/bus"; +import FromBottomDialog from "../../components/dialog/FromBottomDialog"; +import SlideColumnList from "../../components/slide/SlideColumnList"; +import SlideRowList from "../../components/slide/SlideRowList"; +import Video1 from "../../components/Video"; +import Share from "../../components/Share"; +import Uploader from "../me/Uploader"; +import PlayFeedback from "../home/components/PlayFeedback"; +import Duoshan from "../home/components/Duoshan"; +import ShareTo from "../home/components/ShareTo"; +import DouyinCode from "../../components/DouyinCode"; +import FollowSetting from "../home/components/FollowSetting"; +import FollowSetting2 from "../home/components/FollowSetting2"; +import BlockDialog from "../message/components/BlockDialog"; +import Search from "../../components/Search"; +import ConfirmDialog from "../../components/dialog/ConfirmDialog"; +import ShareToFriend from "../home/components/ShareToFriend"; export default { name: "slide", @@ -83,16 +118,32 @@ export default { BVideo, Footer, IndicatorHome, - Comment + FromBottomDialog, + SlideColumnList, + SlideRowList, + Video1, + Comment, + Share, + Uploader, + PlayFeedback, + Duoshan, + ShareTo, + DouyinCode, + FollowSetting, + FollowSetting2, + BlockDialog, + Search, + ConfirmDialog, + ShareToFriend }, data() { return { baseIndex: 0, - videoIndex: 5, + videoIndex: 0, closeOne: true, videoPrefix: ['one', 'two', 'three'], loading: false, - videos: [ + videos1: [ { "id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b", video: 'http://douyin.ttentau.top/0.mp4', @@ -1431,6 +1482,7 @@ export default { } }, ], + videos: [], totalSize: 52, pageSize: 10, pageNo: 0, @@ -1487,15 +1539,30 @@ export default { } }, created() { + this.getData() bus.on('singleClick', () => { new Dom(`.v-${this.videoPrefix[this.baseIndex]}-${this.videoIndex}-video`).trigger('singleClick') }) + bus.on(this.videoPrefix[this.baseIndex] + '-loading', () => { + console.log('loading') + this.getData(true) + }) }, mounted() { }, methods: { + delayShowDialog(cb) { + setTimeout(() => { + cb() + }, 400) + }, + dislike() { + this.$refs.virtualList.dislike(this.videos[10]) + this.videos[this.videoIndex] = this.videos[10] + this.$notice('操作成功，将减少此类视频的推荐') + }, loadMore() { - return + // return if (!this.loading) { this.pageNo++ this.getData() @@ -1507,14 +1574,21 @@ export default { changeIndex() { this.closeOne = !this.closeOne }, - async getData() { + async getData(refresh = false) { + if (this.loading) return this.loading = true let res = await this.$api.videos.recommended({pageNo: this.pageNo, pageSize: this.pageSize}) - console.log(res) + // console.log(res) this.loading = false if (res.code === this.SUCCESS) { this.totalSize = res.data.total + if (refresh) { + this.videos = [] + } this.videos = this.videos.concat(res.data.list) + if (refresh) { + this.$refs.virtualList.refresh(this.videos) + } } else { this.pageNo-- } diff --git a/src/pages/slide/SlideVerticalInfinite.vue b/src/pages/slide/SlideVerticalInfinite.vue index d4269ec..f864ab2 100644 --- a/src/pages/slide/SlideVerticalInfinite.vue +++ b/src/pages/slide/SlideVerticalInfinite.vue @@ -94,12 +94,23 @@ export default { this.insertContent() }, methods: { + refresh(list) { + $(this.wrapper).empty() + list && this.insertContent(list) + }, + dislike(item) { + let currentItem = $(this.wrapper).find(`.slide-item[data-index=${this.lIndex}]`) + let replaceItem = this.getInsEl(item, this.lIndex, true) + new Dom(replaceItem).css('top', currentItem.css('top')) + currentItem.replaceWith(replaceItem) + }, checkChildren() { this.wrapper = this.$refs.wrapper this.wrapperWidth = this.$getCss(this.wrapper, 'width') this.wrapperHeight = this.$getCss(this.wrapper, 'height') }, - insertContent() { + //默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新 + insertContent(list = this.list) { let start = 0 let that = this @@ -107,14 +118,14 @@ export default { start = this.lIndex - (this.virtualTotal - 1) / 2 } let end = start + 5 - if (end >= this.list.length) { - end = this.list.length + if (end >= list.length) { + end = list.length start = end - 5 } if (start < 0) start = 0 // console.log('start', start) // console.log('end', end) - this.list.slice(start, end).map( + list.slice(start, end).map( (item, index) => { //自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样 let el = this.getInsEl(item, start + index, start + index === this.lIndex) @@ -124,9 +135,9 @@ export default { this.$setCss(this.wrapper, 'transform', `translate3d(0px, ${-this.lIndex * this.wrapperHeight}px, 0px)`) - if (this.lIndex > 2 && this.list.length > 5) { + if (this.lIndex > 2 && list.length > 5) { $(this.wrapper).find(".slide-item").each(function () { - if ((that.list.length - that.lIndex) > 2) { + if ((list.length - that.lIndex) > 2) { $(this).css('top', (that.lIndex - 2) * that.wrapperHeight) } else { $(this).css('top', start * that.wrapperHeight) @@ -193,7 +204,7 @@ export default { touchEnd(e) { let isDown = this.moveY < 0 if (this.lIndex === 0 && !isDown && this.moveY > (this.homeRefresh + this.judgeValue)) { - bus.emit(this.name + '-loading') + bus.emit(this.prefix + '-loading') } if ((this.lIndex === 0 && !isDown) || (this.lIndex === this.list.length - 1 && isDown)) this.next = false diff --git a/src/pages/test/Test.vue b/src/pages/test/Test.vue index 1348211..d7f8ce7 100644 --- a/src/pages/test/Test.vue +++ b/src/pages/test/Test.vue @@ -1,57 +1,21 @@ - - diff --git a/src/pages/test/Test2.vue b/src/pages/test/Test2.vue deleted file mode 100644 index 44886a4..0000000 --- a/src/pages/test/Test2.vue +++ /dev/null @@ -1,185 +0,0 @@ - - - - diff --git a/src/pages/test/Test3.vue b/src/pages/test/Test3.vue deleted file mode 100644 index e970d14..0000000 --- a/src/pages/test/Test3.vue +++ /dev/null @@ -1,157 +0,0 @@ - - - - diff --git a/src/pages/test/Test5.vue b/src/pages/test/Test5.vue deleted file mode 100644 index f3992d6..0000000 --- a/src/pages/test/Test5.vue +++ /dev/null @@ -1,223 +0,0 @@ - - - - diff --git a/src/pages/test/TestKeepAlive.vue b/src/pages/test/TestKeepAlive.vue deleted file mode 100644 index 5e2f3a5..0000000 --- a/src/pages/test/TestKeepAlive.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - diff --git a/src/pages/test/TestKeepAlivePage1.vue b/src/pages/test/TestKeepAlivePage1.vue deleted file mode 100644 index d77eb08..0000000 --- a/src/pages/test/TestKeepAlivePage1.vue +++ /dev/null @@ -1,41 +0,0 @@ - - - - diff --git a/src/pages/test/TestOne.vue b/src/pages/test/TestOne.vue deleted file mode 100644 index d46e25f..0000000 --- a/src/pages/test/TestOne.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - - diff --git a/src/pages/test/TestVideo.vue b/src/pages/test/TestVideo.vue deleted file mode 100644 index f7c81e4..0000000 --- a/src/pages/test/TestVideo.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - - diff --git a/src/pages/test/TestVue3.vue b/src/pages/test/TestVue3.vue deleted file mode 100644 index ae85b2c..0000000 --- a/src/pages/test/TestVue3.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - - diff --git a/src/router/routes.js b/src/router/routes.js index 0375f63..ca31691 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -1,12 +1,6 @@ import Index2 from "../pages/home/Index2"; import Test from "../pages/test/Test"; -import Test2 from "../pages/test/Test2"; -import Test3 from "../pages/test/Test3"; import Test4 from "../pages/test/Test4"; -import Test5 from "../pages/test/Test5"; -import TestVue3 from "../pages/test/TestVue3"; -import TestKeepAlive from "../pages/test/TestKeepAlive"; -import TestKeepAlivePage1 from "../pages/test/TestKeepAlivePage1"; import SubmitReport from "../pages/home/SubmitReport"; import Music from "../pages/home/Music"; import MusicRankList from "../pages/home/MusicRankList"; @@ -70,8 +64,6 @@ import VerificationCode from "../pages/login/VerificationCode"; import RetrievePassword from "../pages/login/RetrievePassword"; import Help from "../pages/login/Help"; import Uploader from "../pages/me/Uploader"; -import TestSlide from "../pages/test/TestSlide"; -import TestOne from "../pages/test/TestOne"; import Slide from "../pages/slide/Slide"; const routes = [ @@ -81,15 +73,7 @@ const routes = [ }, {path: '/slide', component: Slide}, {path: '/test', component: Test}, - {path: '/test2', component: Test2}, - {path: '/test3', component: Test3}, {path: '/test4', component: Test4}, - {path: '/test5', component: Test5}, - {path: '/testone', component: TestOne}, - {path: '/TestSlide', component: TestSlide}, - {path: '/TestVue3', component: TestVue3}, - {path: '/TestKeepAlive', component: TestKeepAlive}, - {path: '/TestKeepAlivePage1', component: TestKeepAlivePage1}, {path: '/home', component: Index2}, {path: '/home/music', component: Music}, {path: '/home/music-rank-list', component: MusicRankList},