MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
zyronon 2023-02-11 17:20:54 +08:00
parent d1612e8aac
commit fd9e26e32a
4 changed files with 251 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/BaseButton.vue
View File

@ -84,7 +84,7 @@ export default {
color: white; color: white;
height: 40rem; height: 40rem;
line-height: 40rem; line-height: 40rem;
border-radius: 3rem; border-radius: 8rem;
//width: 100%; //width: 100%;
font-size: 14rem; font-size: 14rem;
display: flex; display: flex;
@ -158,6 +158,11 @@ export default {
border: 1px solid gainsboro; border: 1px solid gainsboro;
} }
&.info {
background: rgba(161, 139, 129, 0.3);
color: white;
}
&:active { &:active {
&.primary { &.primary {
background: @disable-primary-btn-color; background: @disable-primary-btn-color;

46
src/components/slide/SlideUser.vue
View File

@ -1,10 +1,14 @@
<template> <template>
<div id="SlideUser"> <div id="SlideUser">
<div class="content"> <div class="content">
<img @click="$emit('close')" class="close" src="../../assets/img/icon/components/gray-close-full2.png" alt=""> <img @click="$emit('close')" class="close" src="../../assets/img/icon/components/gray-close-full.png" alt="">
<img class="avatar" :src="modelValue.avatar"> <img class="avatar" :src="modelValue.avatar">
<div class="name">{{ modelValue.name }}</div> <div class="name">{{ modelValue.name }}</div>
<div class="age">{{ modelValue.age }}岁</div> <div class="desc">
<div class="tag">{{ modelValue.age }}岁</div>
<div class="tag">成都</div>
<div class="tag">清华大学</div>
</div>
<div class="realName">通讯录朋友{{ modelValue.realName }}</div> <div class="realName">通讯录朋友{{ modelValue.realName }}</div>
<div class="poster-wrapper"> <div class="poster-wrapper">
<div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no"> <div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no">
@ -17,7 +21,7 @@
</div> </div>
</div> </div>
<div class="options"> <div class="options">
<base-button type="white">换一个</base-button> <base-button type="info">换一个</base-button>
<base-button type="primary">关注</base-button> <base-button type="primary">关注</base-button>
</div> </div>
</div> </div>
@ -246,7 +250,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
//background: #e1e1e1; //background: #e1e1e1;
background: linear-gradient(to bottom, rgb(69, 63, 73), rgb(25, 20, 42)); background: linear-gradient(to bottom, rgb(49, 75, 98), rgb(65, 48, 40));
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -254,7 +258,7 @@ export default {
.content { .content {
width: 85%; width: 85%;
background: white; background: linear-gradient(to bottom, rgb(71, 90, 110), rgb(97, 84, 75));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -281,25 +285,35 @@ export default {
.name { .name {
margin-top: 20rem; margin-top: 20rem;
margin-bottom: 20rem; margin-bottom: 20rem;
font-weight: bold; font-size: 20rem;
font-size: 16rem; letter-spacing: 4rem;
color: white;
} }
.age {
font-size: 10rem; .desc {
background: #f1f1f1; display: flex;
padding: 3px;
border-radius: 2px; .tag {
margin: 0 3rem;
font-size: 10rem;
background: rgba(161, 158, 156, 0.3);
color: gainsboro;
padding: 3rem 5rem;
border-radius: 4rem;
}
} }
.realName { .realName {
text-align: center; text-align: center;
color: black; color: gainsboro;
border-top: 1px solid #f1f1f1; border-top: 1px solid #5e5a5a;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid #5e5a5a;
padding: 10rem 0; padding: 10rem 0;
margin: 15rem 0; margin: 15rem 0;
font-size: 12rem; font-size: 14rem;
letter-spacing: 1.5rem;
width: 90%; width: 90%;
} }

336
src/pages/slideHooks/VInfinite-Component.vue
View File

@ -1,186 +1,184 @@
<!--<script setup lang="jsx">--> <script setup lang="jsx">
<!--import {computed, onMounted, reactive, ref, watch} from "vue";--> import {computed, onMounted, reactive, ref, watch} from "vue";
<!--import GM from '../../utils'--> import GM from '../../utils'
<!--import {--> import {
<!-- getSlideDistance,--> getSlideDistance,
<!-- slideInit,--> slideInit,
<!-- slideReset,--> slideReset,
<!-- slideTouchEnd,--> slideTouchEnd,
<!-- slideTouchMove,--> slideTouchMove,
<!-- slideTouchStart--> slideTouchStart
<!--} from "./common";--> } from "./common";
<!--import {SlideType} from "../../utils/const_var";--> import {SlideType} from "../../utils/const_var";
<!--import SlideItem from "@/pages/slideHooks/SlideItem.vue";--> import SlideItem from "@/pages/slideHooks/SlideItem.vue";
<!--import TestItem from "@/pages/slideComponent/TestItem.vue";--> import TestItem from "@/pages/slideComponent/TestItem.vue";
<!--const props = defineProps({--> const props = defineProps({
<!-- index: {--> index: {
<!-- type: Number,--> type: Number,
<!-- default: () => {--> default: () => {
<!-- return 0--> return 0
<!-- }--> }
<!-- },--> },
<!-- position: {--> position: {
<!-- type: Object,--> type: Object,
<!-- default: () => {--> default: () => {
<!-- return {}--> return {}
<!-- }--> }
<!-- },--> },
<!-- render: {--> render: {
<!-- type: Function,--> type: Function,
<!-- default: () => {--> default: () => {
<!-- return null--> return null
<!-- }--> }
<!-- },--> },
<!-- list: {--> list: {
<!-- type: Array,--> type: Array,
<!-- default: () => {--> default: () => {
<!-- return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]--> return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
<!-- }--> }
<!-- },--> },
<!-- virtualTotal: {--> virtualTotal: {
<!-- type: Number,--> type: Number,
<!-- default: () => 5--> default: () => 5
<!-- },--> },
<!-- name: {--> name: {
<!-- type: String,--> type: String,
<!-- default: () => ''--> default: () => ''
<!-- },--> },
<!--})--> })
<!--const emit = defineEmits(['update:index', 'loadMore'])--> const emit = defineEmits(['update:index', 'loadMore'])
<!--const judgeValue = 20--> const judgeValue = 20
<!--const wrapperEl = ref(null)--> const wrapperEl = ref(null)
<!--const state = reactive({--> const state = reactive({
<!-- name: 'SlideVertical',--> name: 'SlideVertical',
<!-- localIndex: props.index,--> localIndex: props.index,
<!-- needCheck: true,--> needCheck: true,
<!-- next: false,--> next: false,
<!-- start: {x: 0, y: 0, time: 0},--> start: {x: 0, y: 0, time: 0},
<!-- move: {x: 0, y: 0},--> move: {x: 0, y: 0},
<!-- wrapper: {width: 0, height: 0, childrenLength: 0},--> wrapper: {width: 0, height: 0, childrenLength: 0},
<!-- cs: [],--> cs: [],
<!-- styleTop: 0,--> styleTop: 0,
<!-- components: {--> components: {
<!-- one: <SlideItem class=" gray">--> one: <SlideItem class=" gray">
<!-- <div class="big">热点0</div>--> <div class="big">热点0</div>
<!-- </SlideItem>,--> </SlideItem>,
<!-- two: <SlideItem class=" gray">--> two: <SlideItem class=" gray">
<!-- <div class="big">热点1</div>--> <div class="big">热点1</div>
<!-- </SlideItem>,--> </SlideItem>,
<!-- three: <SlideItem class=" gray">--> three: <SlideItem class=" gray">
<!-- <div class="big">热点2</div>--> <div class="big">热点2</div>
<!-- </SlideItem>,--> </SlideItem>,
<!-- four: <SlideItem class=" gray">--> four: <SlideItem class=" gray">
<!-- <div class="big">热点3</div>--> <div class="big">热点3</div>
<!-- </SlideItem>,--> </SlideItem>,
<!-- five: <SlideItem class=" gray">--> five: <SlideItem class=" gray">
<!-- <div class="big">热点4</div>--> <div class="big">热点4</div>
<!-- </SlideItem>,--> </SlideItem>,
<!-- }--> }
<!--})--> })
<!--function r(item, index = -1) {--> function r(item, index = -1) {
<!-- let node = props.render(item, state.localIndex, index === 0, props.position)--> let node = props.render(item, state.localIndex, index === 0, props.position)
<!-- return <SlideItem class="slideItemClassName">--> return <SlideItem class="slideItemClassName">
<!-- {node}--> {node}
<!-- </SlideItem>--> </SlideItem>
<!--}--> }
<!--watch(--> watch(
<!-- () => props.index,--> () => props.index,
<!-- (newVal) => {--> (newVal) => {
<!-- if (state.localIndex !== newVal) {--> if (state.localIndex !== newVal) {
<!-- state.localIndex = newVal--> state.localIndex = newVal
<!-- GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)--> GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
<!-- GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)--> GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)
<!-- }--> }
<!-- }--> }
<!--)--> )
<!--watch(--> watch(
<!-- () => props.list,--> () => props.list,
<!-- (newVal) => {--> (newVal) => {
<!-- console.log('list', newVal)--> console.log('list', newVal)
<!-- let half = (props.virtualTotal + 1) / 2--> let half = (props.virtualTotal + 1) / 2
<!-- if (state.localIndex >= half) {--> if (state.localIndex >= half) {
<!-- state.cs = newVal.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))--> state.cs = newVal.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))
<!-- state.styleTop = (state.localIndex - 2) * state.wrapper.height--> state.styleTop = (state.localIndex - 2) * state.wrapper.height
<!-- }--> }
<!-- }--> }
<!--)--> )
<!--onMounted(() => {--> onMounted(() => {
<!-- slideInit(wrapperEl.value, state, SlideType.VERTICAL)--> slideInit(wrapperEl.value, state, SlideType.VERTICAL)
<!-- state.cs = props.list.slice(0, props.virtualTotal).map((v, i) => r(v, i))--> state.cs = props.list.slice(0, props.virtualTotal).map((v, i) => r(v, i))
<!--})--> })
<!--function touchStart(e) {--> function touchStart(e) {
<!-- slideTouchStart(e, wrapperEl.value, state)--> slideTouchStart(e, wrapperEl.value, state)
<!--}--> }
<!--function touchMove(e) {--> function touchMove(e) {
<!-- slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)--> slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
<!--}--> }
<!--function touchEnd(e) {--> function touchEnd(e) {
<!-- slideTouchEnd(e, state, canNext, (isNext) => {--> slideTouchEnd(e, state, canNext, (isNext) => {
<!-- console.log('state.localIndex', state.localIndex)--> console.log('state.localIndex', state.localIndex)
<!-- let half = (props.virtualTotal + 1) / 2--> let half = (props.virtualTotal + 1) / 2
<!-- if (props.list.length > props.virtualTotal) {--> if (props.list.length > props.virtualTotal) {
<!-- if (isNext) {--> if (isNext) {
<!-- if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {--> if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {
<!-- console.log('loadMore')--> console.log('loadMore')
<!-- emit('loadMore')--> emit('loadMore')
<!-- }--> }
<!-- if (state.localIndex >= half && state.localIndex <= props.list.length - half) {--> if (state.localIndex >= half && state.localIndex <= props.list.length - half) {
<!-- console.log('push')--> console.log('push')
<!-- // state.cs = props.list.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))--> // state.cs = props.list.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))
<!-- state.cs.shift()--> state.cs.shift()
<!-- state.cs.push(r(props.list[state.localIndex + (half - 1)]))--> state.cs.push(r(props.list[state.localIndex + (half - 1)]))
<!-- state.styleTop = (state.localIndex - 2) * state.wrapper.height--> state.styleTop = (state.localIndex - 2) * state.wrapper.height
<!-- }--> }
<!-- } else {--> } else {
<!-- //这里先加个1，保持if表达式一致--> //这里先加个1，保持if表达式一致
<!-- let judgeIndex = state.localIndex + 1--> let judgeIndex = state.localIndex + 1
<!-- if (judgeIndex >= half && judgeIndex <= props.list.length - half) {--> if (judgeIndex >= half && judgeIndex <= props.list.length - half) {
<!-- console.log('unshift')--> console.log('unshift')
<!-- state.cs.unshift(r(props.list[state.localIndex - (half - 1)]))--> state.cs.unshift(r(props.list[state.localIndex - (half - 1)]))
<!-- state.cs.pop()--> state.cs.pop()
<!-- state.styleTop = (state.localIndex - 2) * state.wrapper.height--> state.styleTop = (state.localIndex - 2) * state.wrapper.height
<!-- }--> }
<!-- }--> }
<!-- }--> }
<!-- if (state.localIndex < half) {--> if (state.localIndex < half) {
<!-- console.log('&#45;&#45;')--> console.log('--')
<!-- state.styleTop = 0--> state.styleTop = 0
<!-- }--> }
<!-- }, null, SlideType.VERTICAL)--> }, null, SlideType.VERTICAL)
<!-- slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)--> slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
<!--}--> }
<!--function canNext(isNext) {--> function canNext(isNext) {
<!-- return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext));--> return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext));
<!--}--> }
<!--</script>--> </script>
<!--<template>--> <template>
<!-- <div class="slide v">--> <div class="slide v">
<!-- <div class="slide-list flex-direction-column"--> <div class="slide-list flex-direction-column"
<!-- ref="wrapperEl"--> ref="wrapperEl"
<!-- @touchstart="touchStart"--> @touchstart="touchStart"
<!-- @touchmove="touchMove"--> @touchmove="touchMove"
<!-- @touchend="touchEnd"--> @touchend="touchEnd"
<!-- >--> >
<!-- <component :style='{top: state.styleTop + "px"}' :is="v" v-for="(v,i) in state.cs" :key="v.id"/>--> <component :style='{top: state.styleTop + "px"}' :is="v" v-for="(v,i) in state.cs" :key="v.id"/>
<!-- </div>--> </div>
<!-- </div>--> </div>
<!--</template>--> </template>
<!--
测试用<component :is的方法是否可行。结论，可行。但是不实用。当list数据更新时，<component的表现形式为，不销毁组件，只更新props。 测试用<component :is的方法是否可行。结论，可行。但是不实用。当list数据更新时，<component的表现形式为，不销毁组件，只更新props。
感觉会导致已经加载到的video，重新加载。但未经测试 感觉会导致已经加载到的video，重新加载。但未经测试
-->

96
src/pages/slideHooks/VInfinite.vue
View File

@ -131,8 +131,7 @@ function insertContent(list = props.list) {
} }
function getInsEl(item, index, play = false) { function getInsEl(item, index, play = false) {
debugger console.log('index', index, play)
console.log('index',index,play)
let slideVNode = props.render(item, index, play, props.position) let slideVNode = props.render(item, index, play, props.position)
const app = createApp({ const app = createApp({
render() { render() {
@ -160,61 +159,62 @@ function touchEnd(e) {
emit('refresh') emit('refresh')
} }
slideTouchEnd(e, state, canNext, (isNext) => { slideTouchEnd(e, state, canNext, (isNext) => {
if (isNext) { let half = (props.virtualTotal + 1) / 2
let half = (props.virtualTotal + 1) / 2 if (props.list.length > props.virtualTotal) {
if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex >= half) { if (isNext) {
emit('loadMore') if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex >= half) {
} emit('loadMore')
let addItemIndex = state.localIndex + 2
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
if (state.wrapper.childrenLength < props.virtualTotal) {
if (res.length === 0) {
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
} }
} let addItemIndex = state.localIndex + 2
if (state.wrapper.childrenLength === props.virtualTotal let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
&& state.localIndex >= (props.virtualTotal + 1) / 2 if (state.wrapper.childrenLength < props.virtualTotal) {
&& state.localIndex <= props.list.length - 3 if (res.length === 0) {
) { wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
if (res.length === 0) {
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index')).unmount()
// $(wrapperEl.value).find(".base-slide-item:first").remove()
$(wrapperEl.value).find(`.${itemClassName}`).each(function () {
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
})
}
}
if (state.wrapper.childrenLength > props.virtualTotal) {
$(wrapperEl.value).find(`.${itemClassName}`).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) }
}) if (state.wrapper.childrenLength === props.virtualTotal
} && state.localIndex >= (props.virtualTotal + 1) / 2
} else { && state.localIndex <= props.list.length - 3
let addItemIndex = state.localIndex - 2 ) {
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`) if (res.length === 0) {
wrapperEl.value.appendChild(getInsEl(props.list[addItemIndex], addItemIndex))
if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) { appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:first`).data('index')).unmount()
if (res.length === 0) { // $(wrapperEl.value).find(".base-slide-item:first").remove()
wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex)) $(wrapperEl.value).find(`.${itemClassName}`).each(function () {
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount() $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
// $(wrapperEl.value).find(".base-slide-item:last").remove() })
}
}
if (state.wrapper.childrenLength > props.virtualTotal) {
$(wrapperEl.value).find(`.${itemClassName}`).each(function () { $(wrapperEl.value).find(`.${itemClassName}`).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) $(this).css('top', (state.localIndex - 2) * state.wrapper.height)
}) })
} }
} } else {
let addItemIndex = state.localIndex - 2
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
if (state.wrapper.childrenLength > props.virtualTotal) { if (state.localIndex > 1 && state.localIndex <= props.list.length - 4) {
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount() if (res.length === 0) {
wrapperEl.value.prepend(getInsEl(props.list[addItemIndex], addItemIndex))
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
// $(wrapperEl.value).find(".base-slide-item:last").remove()
$(wrapperEl.value).find(`.${itemClassName}`).each(function () {
$(this).css('top', (state.localIndex - 2) * state.wrapper.height)
})
}
}
if (state.wrapper.childrenLength > props.virtualTotal) {
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
}
} }
state.wrapper.childrenLength = wrapperEl.value.children.length
} }
state.wrapper.childrenLength = wrapperEl.value.children.length
}, null, SlideType.VERTICAL) }, null, SlideType.VERTICAL)
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit) slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
} }