zyronon
3 years ago
4 changed files with 249 additions and 232 deletions
@ -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('--')--> |
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，重新加载。但未经测试 |
||||||
--> |
|
||||||
Loading…
Reference in new issue