save
This commit is contained in:
hhh
parent
1b3e7cf7a9
commit
063b3b5616
@ -16,6 +16,7 @@
|
||||
"mitt": "3.0.0",
|
||||
"mockjs": "1.1.0",
|
||||
"pinyin": "2.11.1",
|
||||
"swiper": "^8.4.6",
|
||||
"vconsole": "^3.15.0",
|
||||
"vue": "3.2.45",
|
||||
"vue-router": "4.0.14",
|
||||
|
||||
@ -14,6 +14,7 @@ specifiers:
|
||||
mobile-select: 1.1.2
|
||||
mockjs: 1.1.0
|
||||
pinyin: 2.11.1
|
||||
swiper: ^8.4.6
|
||||
vconsole: ^3.15.0
|
||||
vite: 4.0.4
|
||||
vue: 3.2.45
|
||||
@ -31,6 +32,7 @@ dependencies:
|
||||
mitt: 3.0.0
|
||||
mockjs: 1.1.0
|
||||
pinyin: 2.11.1
|
||||
swiper: 8.4.6
|
||||
vconsole: 3.15.0
|
||||
vue: 3.2.45
|
||||
vue-router: 4.0.14_vue@3.2.45
|
||||
@ -950,6 +952,12 @@ packages:
|
||||
dev: false
|
||||
optional: true
|
||||
|
||||
/dom7/4.0.4:
|
||||
resolution: {integrity: sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==}
|
||||
dependencies:
|
||||
ssr-window: 4.0.2
|
||||
dev: false
|
||||
|
||||
/electron-to-chromium/1.4.284:
|
||||
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
|
||||
dev: true
|
||||
@ -1557,6 +1565,10 @@ packages:
|
||||
resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
|
||||
deprecated: Please use @jridgewell/sourcemap-codec instead
|
||||
|
||||
/ssr-window/4.0.2:
|
||||
resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
|
||||
dev: false
|
||||
|
||||
/string-width/4.2.3:
|
||||
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
|
||||
engines: {node: '>=8'}
|
||||
@ -1598,6 +1610,15 @@ packages:
|
||||
resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
|
||||
dev: true
|
||||
|
||||
/swiper/8.4.6:
|
||||
resolution: {integrity: sha512-HACW035vBz2T6Kfut23EAzXhcDpgR8doX+wjq0ZUvJgS5SQApGrV885DAPLBFnmPUISsAhNSVxPKDxqroFvXvQ==}
|
||||
engines: {node: '>= 4.7.0'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
dom7: 4.0.4
|
||||
ssr-window: 4.0.2
|
||||
dev: false
|
||||
|
||||
/tar/6.1.13:
|
||||
resolution: {integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==}
|
||||
engines: {node: '>=10'}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="video-wrapper" ref="videoWrapper" :class="name">
|
||||
<div class="video-wrapper" ref="videoWrapper" :class="positionName">
|
||||
<Loading v-if="loading" style="position: absolute"/>
|
||||
<!-- <video :src="video.video + '?v=123'"-->
|
||||
<video :src="video.video"
|
||||
:poster="video.video + videoPoster"
|
||||
<video :src="item.video"
|
||||
:poster="item.video + videoPoster"
|
||||
ref="video"
|
||||
muted
|
||||
preload
|
||||
@ -13,15 +13,13 @@
|
||||
<img src="../../assets/img/icon/play-white.png" class="pause" v-if="paused">
|
||||
<div class="float" :style="{opacity: isUp?0:1}">
|
||||
<div :style="{opacity:isMove ? 0:1}" class="normal">
|
||||
<ItemToolbar :item="video"
|
||||
:index="0"
|
||||
prefix="sadfa"
|
||||
<ItemToolbar v-model:item="localItem"
|
||||
:index="index"
|
||||
:position="position"
|
||||
/>
|
||||
<ItemDesc
|
||||
:item="video"
|
||||
:index="0"
|
||||
prefix="sadfa"
|
||||
|
||||
v-model:item="localItem"
|
||||
:index="index"
|
||||
/>
|
||||
<div v-if="isMy" class="comment-status">
|
||||
<div class="comment">
|
||||
@ -79,7 +77,7 @@ export default {
|
||||
ItemDesc
|
||||
},
|
||||
props: {
|
||||
video: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
@ -91,10 +89,10 @@ export default {
|
||||
return -1
|
||||
}
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return ''
|
||||
return {}
|
||||
}
|
||||
},
|
||||
//用于第一条数据，自动播放，如果都用事件去触发播放，有延迟
|
||||
@ -119,7 +117,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
durationStyle() {
|
||||
return {width: this.pageX + 'px'}
|
||||
return {width: this.playX + 'px'}
|
||||
},
|
||||
progressClass() {
|
||||
if (this.isMove) {
|
||||
@ -128,16 +126,18 @@ export default {
|
||||
return this.isPlaying ? '' : 'stop'
|
||||
}
|
||||
},
|
||||
positionName() {
|
||||
return 'item-' + Object.values(this.position).join('-')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
paused: false,
|
||||
name: `v-${this.tag}-item`,
|
||||
duration: 0,
|
||||
step: 0,
|
||||
currentTime: -1,
|
||||
pageX: 0,
|
||||
playX: 0,
|
||||
start: {x: 0},
|
||||
last: {x: 0, time: 0},
|
||||
height: 0,
|
||||
@ -147,31 +147,29 @@ export default {
|
||||
isMove: false,
|
||||
isSingleClick: false,
|
||||
test: [1, 2],
|
||||
lVideo: this.video,
|
||||
localItem: this.item,
|
||||
progressBarRect: {},
|
||||
|
||||
videoScreenHeight: 0,
|
||||
videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('position',this.position)
|
||||
console.log('item',this.item)
|
||||
this.height = document.body.clientHeight
|
||||
this.width = document.body.clientWidth
|
||||
let video = this.$refs.video
|
||||
video.currentTime = 0
|
||||
let fun = e => {
|
||||
this.currentTime = Math.ceil(e.target.currentTime)
|
||||
this.pageX = (this.currentTime - 1) * this.step
|
||||
this.playX = (this.currentTime - 1) * this.step
|
||||
}
|
||||
video.addEventListener('loadedmetadata', e => {
|
||||
this.videoScreenHeight = video.videoHeight / (video.videoWidth / this.width)
|
||||
this.duration = video.duration
|
||||
// if (this.duration > 60) {
|
||||
if (this.duration > 6) {
|
||||
this.progressBarRect = this.$refs.progress.getBoundingClientRect()
|
||||
this.step = this.progressBarRect.width / Math.floor(this.duration)
|
||||
video.addEventListener('timeupdate', fun)
|
||||
}
|
||||
this.progressBarRect = this.$refs.progress.getBoundingClientRect()
|
||||
this.step = this.progressBarRect.width / Math.floor(this.duration)
|
||||
video.addEventListener('timeupdate', fun)
|
||||
})
|
||||
|
||||
let eventTester = (e, t) => {
|
||||
@ -230,8 +228,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
new Dom(`.${this.name}-marquee`).trigger('start')
|
||||
new Dom(`.${this.name}-music`).trigger('start')
|
||||
new Dom(`.${this.tag}-marquee`).trigger('start')
|
||||
new Dom(`.${this.tag}-music`).trigger('start')
|
||||
// console.log('trigger-play')
|
||||
this.isPlaying = true
|
||||
this.paused = false
|
||||
@ -242,8 +240,8 @@ export default {
|
||||
this.$refs.video.play()
|
||||
},
|
||||
stop() {
|
||||
new Dom(`.${this.name}-marquee`).trigger('stop')
|
||||
new Dom(`.${this.name}-music`).trigger('stop')
|
||||
new Dom(`.${this.tag}-marquee`).trigger('stop')
|
||||
new Dom(`.${this.tag}-music`).trigger('stop')
|
||||
// console.log('trigger-stop')
|
||||
this.$refs.video.pause()
|
||||
this.paused = false
|
||||
@ -251,8 +249,8 @@ export default {
|
||||
this.$refs.video.currentTime = 0
|
||||
},
|
||||
pause() {
|
||||
new Dom(`.${this.name}-marquee`).trigger('pause')
|
||||
new Dom(`.${this.name}-music`).trigger('pause')
|
||||
new Dom(`.${this.tag}-marquee`).trigger('pause')
|
||||
new Dom(`.${this.tag}-music`).trigger('pause')
|
||||
// console.log('trigger-pause')
|
||||
this.$refs.video.pause()
|
||||
this.paused = true
|
||||
@ -271,35 +269,29 @@ export default {
|
||||
this.isAttention = true
|
||||
}, 1000)
|
||||
},
|
||||
loved(e, index) {
|
||||
this.lVideo.isLoved = !this.lVideo.isLoved
|
||||
this.$emit('update:video', this.lVideo)
|
||||
},
|
||||
touchstart(e) {
|
||||
Utils.$stopPropagation(e)
|
||||
this.start.x = e.touches[0].pageX
|
||||
this.last.x = this.pageX
|
||||
this.last.x = this.playX
|
||||
this.last.time = this.currentTime
|
||||
},
|
||||
touchmove(e) {
|
||||
// console.log('move',e)
|
||||
// if (this.isPlaying) return
|
||||
Utils.$stopPropagation(e)
|
||||
this.isMove = true
|
||||
this.pause()
|
||||
let dx = e.touches[0].pageX - this.start.x
|
||||
this.pageX = this.last.x + dx
|
||||
this.playX = this.last.x + dx
|
||||
this.currentTime = this.last.time + Math.ceil(Math.ceil(dx) / this.step)
|
||||
if (this.currentTime <= 0) this.currentTime = 0
|
||||
if (this.currentTime >= this.duration) this.currentTime = this.duration
|
||||
Utils.$stopPropagation(e)
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.isPlaying) return
|
||||
// console.log('end', e)
|
||||
setTimeout(() => {
|
||||
this.isMove = false
|
||||
}, 1000)
|
||||
this.play()
|
||||
Utils.$stopPropagation(e)
|
||||
if (this.isPlaying) return
|
||||
setTimeout(() => this.isMove = false, 1000)
|
||||
this.play()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import {reactive} from "vue";
|
||||
import BaseMarquee from "../BaseMarquee";
|
||||
|
||||
const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||
const {item, index, isMy, isUp, isPlay} = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
@ -16,12 +16,6 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||
return -1
|
||||
}
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
isMy: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
@ -45,7 +39,6 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||
|
||||
const state = reactive({
|
||||
isAttention: false,
|
||||
name: `v-${prefix}-${index}-video`,
|
||||
test: [1, 2],
|
||||
})
|
||||
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
import BaseMusic from "../BaseMusic";
|
||||
import Utils from "../../utils";
|
||||
import {reactive} from "vue";
|
||||
import bus from "../../utils/bus";
|
||||
import {cloneDeep} from "lodash";
|
||||
|
||||
const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||
const {item, index, isMy, isUp, isPlay, position} = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
@ -16,10 +18,10 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||
return -1
|
||||
}
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return ''
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isMy: {
|
||||
@ -42,15 +44,16 @@ const {item, index, prefix, isMy, isUp, isPlay} = defineProps({
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:item'])
|
||||
const state = reactive({
|
||||
isAttention: false,
|
||||
name: `v-${prefix}-${index}-video`,
|
||||
})
|
||||
|
||||
function loved(e, index) {
|
||||
// this.lVideo.isLoved = !this.lVideo.isLoved
|
||||
// this.$emit('update:video', this.lVideo)
|
||||
let old = cloneDeep(item)
|
||||
old.isLoved = !old.isLoved
|
||||
emit('update:item', old)
|
||||
// bus.emit('update:item', {position, item: old})
|
||||
}
|
||||
|
||||
function attention() {
|
||||
|
||||
@ -356,7 +356,7 @@ export default {
|
||||
childs: -1
|
||||
},
|
||||
collect: {
|
||||
video: {
|
||||
item: {
|
||||
list: [],
|
||||
childs: -1,
|
||||
},
|
||||
|
||||
@ -12,10 +12,10 @@ const props = defineProps({
|
||||
return 0
|
||||
}
|
||||
},
|
||||
tag: {
|
||||
type: String,
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return ''
|
||||
return {}
|
||||
}
|
||||
},
|
||||
render: {
|
||||
@ -39,6 +39,7 @@ const emit = defineEmits(['update:index'])
|
||||
|
||||
const appInsMap = new Map()
|
||||
const judgeValue = 20
|
||||
const slideItemClassName = 'slide-item2'
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: 'SlideVerticalInfinite',
|
||||
@ -69,7 +70,6 @@ onMounted(() => {
|
||||
//默认使用this.list,刷新时，考虑到vue可能更新外面的videos到this.list数据没有那么快，因为我要立即刷新
|
||||
function insertContent(list = props.list) {
|
||||
let start = 0
|
||||
let that = this
|
||||
|
||||
if (state.localIndex >= (props.virtualTotal - 1) / 2) {
|
||||
start = state.localIndex - (props.virtualTotal - 1) / 2
|
||||
@ -80,8 +80,8 @@ function insertContent(list = props.list) {
|
||||
start = end - 5
|
||||
}
|
||||
if (start < 0) start = 0
|
||||
// console.log('start', start)
|
||||
// console.log('end', end)
|
||||
console.log('start', start)
|
||||
console.log('end', end)
|
||||
list.slice(start, end).map(
|
||||
(item, index) => {
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
@ -93,7 +93,7 @@ function insertContent(list = props.list) {
|
||||
${-state.localIndex * state.wrapper.height}px, 0px)`)
|
||||
|
||||
if (state.localIndex > 2 && list.length > 5) {
|
||||
$(wrapperEl.value).find(".slide-item").each(function () {
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
if ((list.length - state.localIndex) > 2) {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
} else {
|
||||
@ -106,10 +106,10 @@ function insertContent(list = props.list) {
|
||||
|
||||
function getInsEl(item, index, play = false) {
|
||||
// console.log('index',index,play)
|
||||
let slideVNode = props.render(item, index, play, props.tag)
|
||||
let slideVNode = props.render(item, index, play, props.position)
|
||||
const app = createApp({
|
||||
render() {
|
||||
return <SlideItem>{slideVNode}</SlideItem>
|
||||
return <SlideItem data-index={index}>{slideVNode}</SlideItem>
|
||||
}
|
||||
})
|
||||
const parent = document.createElement('div')
|
||||
@ -129,8 +129,58 @@ function touchMove(e) {
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, () => {
|
||||
slideTouchEnd(e, state, canNext, (isNext) => {
|
||||
if (isNext) {
|
||||
let addItemIndex = state.localIndex + 2
|
||||
let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`)
|
||||
if (state.wrapper.childrenLength < props.virtualTotal) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
}
|
||||
}
|
||||
if (state.wrapper.childrenLength === props.virtualTotal
|
||||
&& state.localIndex >= (props.virtualTotal + 1) / 2
|
||||
&& state.localIndex <= props.list.length - 3
|
||||
) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:first`).data('index')).unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:first").remove()
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
let index = $(this).data('index')
|
||||
if (index < (state.localIndex - 2)) {
|
||||
appInsMap.get(index).unmount()
|
||||
}
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
let addItemIndex = state.localIndex - 2
|
||||
let res = $(wrapperEl.value).find(`.${slideItemClassName}[data-index=${addItemIndex}]`)
|
||||
|
||||
if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
|
||||
if (res.length === 0) {
|
||||
wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
|
||||
appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:last").remove()
|
||||
$(wrapperEl.value).find(`.${slideItemClassName}`).each(function () {
|
||||
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
appInsMap.get($(wrapperEl.value).find(`.${slideItemClassName}:last`).data('index')).unmount()
|
||||
}
|
||||
}
|
||||
|
||||
state.wrapper.childrenLength = wrapperEl.value.children.length
|
||||
}, null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
|
||||
return state.next
|
||||
}
|
||||
|
||||
export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL,notNextCb) {
|
||||
export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL, notNextCb) {
|
||||
state.move.x = e.touches[0].pageX - state.start.x
|
||||
state.move.y = e.touches[0].pageY - state.start.y
|
||||
|
||||
@ -58,7 +58,7 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
|
||||
}
|
||||
Utils.$setCss(el, 'transition-duration', `0ms`)
|
||||
Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
|
||||
}else {
|
||||
} else {
|
||||
notNextCb?.()
|
||||
}
|
||||
}
|
||||
@ -82,7 +82,10 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
|
||||
} else {
|
||||
state.localIndex--
|
||||
}
|
||||
return nextCb?.()
|
||||
|
||||
|
||||
|
||||
return nextCb?.(isNext)
|
||||
}
|
||||
}
|
||||
notNextCb?.()
|
||||
|
||||
@ -23,7 +23,10 @@
|
||||
v-model:index="state.itemIndex"
|
||||
:render="render"
|
||||
:list="state.recommendVideos"
|
||||
tag="0-5"
|
||||
:position="{
|
||||
baseIndex:0,
|
||||
navIndex:5,
|
||||
}"
|
||||
>
|
||||
</VInfinite>
|
||||
</SlideItem>
|
||||
@ -58,7 +61,7 @@ import SlideImgs from "../../components/slide/SlideAlbum";
|
||||
import BVideo from "../../components/slide/BVideo";
|
||||
|
||||
import resource from "../../assets/data/resource.js";
|
||||
import {onMounted, reactive} from "vue";
|
||||
import {onMounted, onUnmounted, reactive} from "vue";
|
||||
import enums from "../../utils/enums";
|
||||
import bus from "../../utils/bus";
|
||||
import Dom from "../../utils/dom";
|
||||
@ -162,6 +165,436 @@ const state = reactive({
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'recommend-video',
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'recommend-video',
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'recommend-video',
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'recommend-video',
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'recommend-video',
|
||||
"id": "034ae83b-ca0a-401a-b7c6-cf78361bae7b",
|
||||
video: 'http://douyin.ttentau.top/0.mp4',
|
||||
"video_data_size": 26829508,
|
||||
"duration": 427780,
|
||||
"desc": "我不管我们宿舍第一好看",
|
||||
"allow_download": 0,
|
||||
"allow_duet": 0,
|
||||
"allow_react": 0,
|
||||
"allow_music": 1,
|
||||
"allow_douplus": 1,
|
||||
"allow_share": 1,
|
||||
"digg_count": 10480000,
|
||||
"comment_count": 79000,
|
||||
"download_count": 6,
|
||||
"play_count": 0,
|
||||
"share_count": 119000,
|
||||
"forward_count": 0,
|
||||
"collect_count": 3,
|
||||
"sort": 195,
|
||||
"is_top": 0,
|
||||
"city": "北京",
|
||||
address: '中央戏剧学院',
|
||||
"musicId": "2ee213c6-3e3f-4758-ba5a-7f1c955604a4",
|
||||
"create_time": "1630423555",
|
||||
"creator_id": "93864497380",
|
||||
"status": 1,
|
||||
"topics": [
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "敬礼变装",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
{
|
||||
"id": "85ceda30-898f-4b57-b891-0e58b3ab99a9",
|
||||
"name": "宿舍",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
}
|
||||
],
|
||||
"music": {
|
||||
"id": "cde50af2-628c-4d28-b9c6-67237a62518e",
|
||||
"cover": "https://p29.douyinpic.com/img/tos-cn-avt-0015/f4de202ff2e41b523838a4a767aebd16~c5_100x100.jpeg?from=116350172",
|
||||
"mp3": "https://sf3-cdn-tos.douyinstatic.com/obj/ies-music/1658584661080088.mp3",
|
||||
"title": "@穷电影创作的原声-小高快起来跳舞",
|
||||
"creator_id": "93864497380",
|
||||
"create_time": "1630423555",
|
||||
"status": 1
|
||||
},
|
||||
"author": {
|
||||
"id": "1",
|
||||
"unique_id_modify_time": "1630393144",
|
||||
"unique_id": "10040050",
|
||||
"favoriting_count": 143,
|
||||
"avatar": new URL('../../assets/img/icon/avatar/3.png', import.meta.url).href,
|
||||
school: {
|
||||
name: '中央戏剧学院',
|
||||
department: null,
|
||||
joinTime: null,
|
||||
education: null,
|
||||
displayType: enums.DISPLAY_TYPE.ALL,
|
||||
},
|
||||
"city": "",
|
||||
"province": '北京',
|
||||
"country": "",
|
||||
"location": "",
|
||||
"birthday": "2002-01-01",
|
||||
"cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
|
||||
"following_count": 66,
|
||||
"follower_count": 235000,
|
||||
"aweme_count": 1796000,
|
||||
"nickname": "我是小睿耶",
|
||||
certification: '',
|
||||
"phone": "",
|
||||
"sex": "",
|
||||
"last_login_time": "1630423555",
|
||||
"create_time": "1630423555",
|
||||
"status": 1,
|
||||
"desc": `一个普普通通学表演的\n看到的人都能开开心心`,
|
||||
"is_private": 0
|
||||
}
|
||||
},
|
||||
],
|
||||
|
||||
isCommenting: false,
|
||||
@ -186,9 +619,19 @@ onMounted(() => {
|
||||
bus.on('singleClick', () => {
|
||||
new Dom(`.v-${state.baseIndex}-${state.navIndex}-${state.itemIndex}-item`).trigger('singleClick')
|
||||
})
|
||||
bus.on('update:item', val => {
|
||||
console.log('val', val)
|
||||
const {baseIndex, navIndex, itemIndex} = val.position
|
||||
if (navIndex === 5) {
|
||||
// state.recommendVideos[itemIndex] = val.item
|
||||
}
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
bus.offAll()
|
||||
})
|
||||
|
||||
function render(item, itemIndex, play, tag) {
|
||||
function render(item, itemIndex, play, position) {
|
||||
let node
|
||||
if (item.type === 'img') {
|
||||
node = <img src={item.src} style="height:100%;"/>
|
||||
@ -199,8 +642,8 @@ function render(item, itemIndex, play, tag) {
|
||||
if (item.type === 'recommend-video') {
|
||||
node = <BVideo
|
||||
isPlay={play}
|
||||
video={item}
|
||||
tag={tag + '-' + itemIndex}
|
||||
item={item}
|
||||
position={{...position, itemIndex}}
|
||||
onShowComments={e => state.isCommenting = true}
|
||||
onShowShare={e => state.isSharing = true}
|
||||
onGoUserInfo={e => state.baseActiveIndex = 1}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<!-- <SlideUser></SlideUser>-->
|
||||
<!-- <SlideImgs></SlideImgs>-->
|
||||
<slideHooks></slideHooks>
|
||||
<!-- <TestSwiperJs></TestSwiperJs>-->
|
||||
|
||||
<!-- <div class="body">-->
|
||||
<!-- <div class="wrapper">-->
|
||||
@ -18,6 +19,7 @@ import SlideUser from "../../components/slide/SlideUser";
|
||||
import SlideImgs from "../../components/slide/SlideAlbum";
|
||||
import TestImg from "./TestImg";
|
||||
import slideHooks from '../slideHooks'
|
||||
import TestSwiperJs from "./TestSwiperJs";
|
||||
import {mat4} from "gl-matrix";
|
||||
|
||||
export default {
|
||||
@ -27,7 +29,8 @@ export default {
|
||||
TestSlide,
|
||||
SlideUser,
|
||||
SlideImgs,
|
||||
TestImg
|
||||
TestImg,
|
||||
TestSwiperJs
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
55
src/pages/test/TestSwiperJs.vue
Normal file
55
src/pages/test/TestSwiperJs.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<swiper :modules="[Virtual]" :space-between="50" virtual>
|
||||
<swiper-slide
|
||||
v-for="(slideContent, index) in slides"
|
||||
:key="index"
|
||||
:virtualIndex="index"
|
||||
>
|
||||
<div class="aa">{{ slideContent }}</div>
|
||||
</swiper-slide
|
||||
>
|
||||
</swiper>
|
||||
</template>
|
||||
<script>
|
||||
import {Virtual} from 'swiper';
|
||||
import {Swiper, SwiperSlide} from 'swiper/vue';
|
||||
import SlideItem from "../slideHooks/SlideItem";
|
||||
import "swiper/css";
|
||||
import "swiper/css/virtual";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SlideItem,
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
setup() {
|
||||
// Create array with 1000 slides
|
||||
const slides = Array.from({length: 1000}).map(
|
||||
(el, index) => `Slide ${index + 1}`
|
||||
);
|
||||
return {
|
||||
slides,
|
||||
Virtual,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.swiper {
|
||||
height: 50vh;
|
||||
//width: 100%;
|
||||
color: white;
|
||||
font-size: 14rem;
|
||||
|
||||
.swiper-slide {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.aa {
|
||||
height: 50vh;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,10 +9,20 @@ export default {
|
||||
}
|
||||
this.eventMap.set(eventType, cbs)
|
||||
},
|
||||
off(eventType) {
|
||||
let cbs = this.eventMap.has(eventType);
|
||||
if (cbs) {
|
||||
this.eventMap.delete(eventType);
|
||||
}
|
||||
},
|
||||
offAll() {
|
||||
this.eventMap = new Map()
|
||||
},
|
||||
emit(eventType, val) {
|
||||
let cbs = this.eventMap.get(eventType)
|
||||
if (cbs) {
|
||||
cbs.map(cb => cb(val))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user