diff --git a/package-lock.json b/package-lock.json index b18662c..6659ba4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1217,9 +1217,9 @@ } }, "tar": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.0.tgz", - "integrity": "sha512-DUCttfhsnLCjwoDoFcI+B2iJgYa93vBnDUATYEeRx6sntCTdN01VnqsIuTlALXla/LWooNg0yEGeB+Y8WdFxGA==", + "version": "6.1.8", + "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.8.tgz", + "integrity": "sha512-sb9b0cp855NbkMJcskdSYA7b11Q8JsX4qe4pyUAfHp+Y6jBjJeek2ZVlwEfWayshEIwlIzXx0Fain3QG9JPm2A==", "optional": true, "requires": { "chownr": "^2.0.0", @@ -1228,6 +1228,27 @@ "minizlib": "^2.1.1", "mkdirp": "^1.0.3", "yallist": "^4.0.0" + }, + "dependencies": { + "fs-minipass": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", + "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", + "optional": true, + "requires": { + "minipass": "^3.0.0" + } + }, + "minizlib": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", + "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", + "optional": true, + "requires": { + "minipass": "^3.0.0", + "yallist": "^4.0.0" + } + } } }, "yallist": { @@ -1836,63 +1857,6 @@ "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=", "dev": true }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, "ssri": { "version": "8.0.1", "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364735533&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz", @@ -1901,28 +1865,6 @@ "requires": { "minipass": "^3.1.1" } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.2.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz", - "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - } } } }, @@ -5910,15 +5852,6 @@ "universalify": "^0.1.0" } }, - "fs-minipass": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", - "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==", - "optional": true, - "requires": { - "minipass": "^3.0.0" - } - }, "fs-write-stream-atomic": { "version": "1.0.10", "resolved": "https://registry.npm.taobao.org/fs-write-stream-atomic/download/fs-write-stream-atomic-1.0.10.tgz", @@ -7989,24 +7922,6 @@ } } }, - "minizlib": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz", - "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==", - "optional": true, - "requires": { - "minipass": "^3.0.0", - "yallist": "^4.0.0" - }, - "dependencies": { - "yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "optional": true - } - } - }, "mississippi": { "version": "3.0.0", "resolved": "https://registry.npm.taobao.org/mississippi/download/mississippi-3.0.0.tgz", @@ -9884,8 +9799,8 @@ }, "querystringify": { "version": "2.2.0", - "resolved": "https://registry.npm.taobao.org/querystringify/download/querystringify-2.2.0.tgz", - "integrity": "sha1-M0WUG0FTy50ILY7uTNogFqmu9/Y=", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, "randombytes": { @@ -12151,9 +12066,9 @@ } }, "url-parse": { - "version": "1.5.1", - "resolved": "https://registry.npm.taobao.org/url-parse/download/url-parse-1.5.1.tgz?cache=0&sync_timestamp=1613659698159&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Furl-parse%2Fdownload%2Furl-parse-1.5.1.tgz", - "integrity": "sha1-1fqYkK+KXh8nSiyYN2UQ9kJfbjs=", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "dev": true, "requires": { "querystringify": "^2.1.1", @@ -12326,6 +12241,87 @@ } } }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.5.0", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz", + "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + } + } + }, "vue-router": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz", diff --git a/src/mock/index.js b/src/mock/index.js index d0feef5..30309e4 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -57,18 +57,24 @@ let pageSize = 15 }()) !(function private1() { - let data = {total: Mock.Random.natural(1, 20)} - data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + // let data = {total: Mock.Random.natural(1, 20)} + // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + let data = {total: 4} + data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] Mock.mock(/private/, Mock.mock({data, code: 200, msg: '',})) }()) !(function like() { - let data = {total: Mock.Random.natural(1, 20)} - data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + // let data = {total: Mock.Random.natural(1, 20)} + // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + let data = {total: 11} + data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] Mock.mock(/like/, Mock.mock({data, code: 200, msg: '',})) }()) !(function collect() { - let data = {total: Mock.Random.natural(1, 20)} - data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + // let data = {total: Mock.Random.natural(1, 20)} + // data[`list|${data.total > pageSize ? pageSize : data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] + let data = {total: 5} + data[`list|${data.total}`] = [{'like|10000-990000': 1000000, src: '@imgs'}] Mock.mock(/collect/, Mock.mock({data, code: 200, msg: '',})) }()) diff --git a/src/pages/me/Me2.vue b/src/pages/me/Me2.vue index 2012a86..03be36c 100644 --- a/src/pages/me/Me2.vue +++ b/src/pages/me/Me2.vue @@ -290,40 +290,61 @@ export default { this.changeIndex(0, null) }) this.videoItemHeight = this.bodyWidth / 3 * 1.2 + 2 + // console.log('videoItemHeight',this.videoItemHeight) }, methods: { async changeIndex(newVal, oldVal) { - let res - if (this.videos[Object.keys(this.videos)[newVal]].total !== -1) return - switch (newVal) { - case 0: - res = await this.$api.videos.my() - if (res.code === this.SUCCESS_CODE) this.videos.my = res.data - this.$console(this.videos) - - let posterHeight = Math.ceil(this.videos.my.total / 3) * this.videoItemHeight - if (posterHeight < this.refs.defaultVideoSlideRowListHeight) { - // this.$setCss(this.$refs.videoSlideRowList, 'height', posterHeight + 'px') - this.refs.videoSlideRowListHeight = posterHeight + 60 - } else { - this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight - } - break - case 1: - res = await this.$api.videos.private() - if (res.code === this.SUCCESS_CODE) this.videos.private = res.data - this.$console(this.videos) - break - case 2: - res = await this.$api.videos.like() - if (res.code === this.SUCCESS_CODE) this.videos.like = res.data - this.$console(this.videos) - break - case 3: - res = await this.$api.videos.collect() - if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data - this.$console(this.videos) - break + // console.log('oldVal',oldVal) + if (this.videos[Object.keys(this.videos)[newVal]].total === -1) { + let res + switch (newVal) { + case 0: + res = await this.$api.videos.my() + if (res.code === this.SUCCESS_CODE) this.videos.my = res.data + this.$console(this.videos) + break + case 1: + res = await this.$api.videos.private() + if (res.code === this.SUCCESS_CODE) this.videos.private = res.data + this.$console(this.videos) + break + case 2: + res = await this.$api.videos.like() + if (res.code === this.SUCCESS_CODE) this.videos.like = res.data + this.$console(this.videos) + break + case 3: + res = await this.$api.videos.collect() + if (res.code === this.SUCCESS_CODE) this.videos.collect = res.data + this.$console(this.videos) + break + } + } + let posterHeight = Math.ceil(this.videos[Object.keys(this.videos)[newVal]].total / 3) * this.videoItemHeight + // console.log('posterHeight', posterHeight) + + if (oldVal !== null) { + let transformY = this.getTransform(this.$refs.scroll) + // console.log('transformY', transformY) + let slideRowListHeight = this.bodyHeight - 50 - 352 - 50 + Math.abs(transformY) + // console.log('slideRowListHeight', slideRowListHeight) +// debugger + if (posterHeight + 60 < slideRowListHeight) { + this.refs.videoSlideRowListHeight = slideRowListHeight + } + if (posterHeight + 60 > slideRowListHeight) { + this.refs.videoSlideRowListHeight = posterHeight + 60 + } + if (posterHeight + 60 > this.refs.defaultVideoSlideRowListHeight) { + this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight + } + } else { + if (posterHeight + 60 < this.refs.defaultVideoSlideRowListHeight) { + // this.$setCss(this.$refs.videoSlideRowList, 'height', posterHeight + 'px') + this.refs.videoSlideRowListHeight = posterHeight + 60 + } else { + this.refs.videoSlideRowListHeight = this.refs.defaultVideoSlideRowListHeight + } } }, touchStart(e) { @@ -344,6 +365,7 @@ export default { // console.log('distance', distance) //往上划 if (distance > 0) { + this.$refs.scroll.style.transform = `translate3d(0,0,0)` if (distance < 400) { // if (this.baseActiveIndex !== 0) return // if (this.refs.header.getBoundingClientRect().top !== 0) return @@ -374,23 +396,19 @@ export default { } } else { this.indicatorFixed = Math.abs(distance) > offsetTop - this.floatFixed = Math.abs(distance) > 100 - this.floatShowName = Math.abs(distance) > 150 if (this.indicatorFixed) { this.fixedLocationY = e.touches[0].pageY } - // console.log('indicatorFixed', this.indicatorFixed) - // console.log('distance', distance) - // if (this.indicatorFixed){ - // this.$refs.scroll.style.transform = `translate3d(0,${this.indicatorFixed ? -offsetTop : distance}px,0)` - // } - //todo if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) { let endTransformY = Math.abs(offsetTop) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight) this.$refs.scroll.style.transform = `translate3d(0,${ distance > -endTransformY ? distance : -endTransformY }px,0)` + this.floatFixed = Math.abs(distance) > 100 + this.floatShowName = Math.abs(distance) > 150 } else { + this.floatFixed = Math.abs(distance) > 100 + this.floatShowName = Math.abs(distance) > 150 this.$refs.scroll.style.transform = `translate3d(0,${this.indicatorFixed ? -offsetTop : distance}px,0)` } } @@ -476,22 +494,34 @@ export default { this.moveYDistance = distance > 0 ? 0 : -this.refs.descHeight } this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = false + this.changeIndex(this.contentIndex, this.contentIndex) } else { //往下划 this.$refs.scroll.style.transition = 'all .3s' - this.$refs.scroll.style.transform = `translate3d(0,${distance > 0 ? 0 : -this.refs.descHeight + this.floatHeight}px,0)` - this.moveYDistance = distance > 0 ? 0 : -this.refs.descHeight + this.floatHeight - this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true + let offsetTop = this.refs.descHeight - this.floatHeight + if (this.refs.defaultVideoSlideRowListHeight > this.refs.videoSlideRowListHeight) { + let endTransformY = Math.abs(offsetTop) - (this.refs.defaultVideoSlideRowListHeight - this.refs.videoSlideRowListHeight) + this.$refs.scroll.style.transform = `translate3d(0,${-endTransformY}px,0)` + // this.floatShowName = this.floatFixed = true + this.floatFixed = Math.abs(endTransformY) > 100 + this.floatShowName = Math.abs(endTransformY) > 150 + this.moveYDistance = -endTransformY + } else { + this.$refs.scroll.style.transform = `translate3d(0,${-this.refs.descHeight + this.floatHeight}px,0)` + this.indicatorFixed = this.floatShowName = this.floatFixed = this.isScroll = true + this.moveYDistance = -this.refs.descHeight + this.floatHeight + } } } } else { this.isScroll = true } - // console.log('end-isScroll', this.isScroll) }, getTransform(el) { let transform = el.style.transform + // console.log(transform) let transformY = transform.substring(transform.indexOf('0px') + 5, transform.lastIndexOf('0px') - 4) + // console.log(transformY) //当前的transformY transformY = parseInt(transformY) return transformY diff --git a/src/pages/me/Me3.vue b/src/pages/me/Me3.vue new file mode 100644 index 0000000..03be36c --- /dev/null +++ b/src/pages/me/Me3.vue @@ -0,0 +1,822 @@ + + + +