优化
This commit is contained in:
zyronon
parent
d1612e8aac
commit
fd9e26e32a
@ -84,7 +84,7 @@ export default {
|
||||
color: white;
|
||||
height: 40rem;
|
||||
line-height: 40rem;
|
||||
border-radius: 3rem;
|
||||
border-radius: 8rem;
|
||||
//width: 100%;
|
||||
font-size: 14rem;
|
||||
display: flex;
|
||||
@ -158,6 +158,11 @@ export default {
|
||||
border: 1px solid gainsboro;
|
||||
}
|
||||
|
||||
&.info {
|
||||
background: rgba(161, 139, 129, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
&.primary {
|
||||
background: @disable-primary-btn-color;
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div id="SlideUser">
|
||||
<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">
|
||||
<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="poster-wrapper">
|
||||
<div class="poster-item" v-for="(i,index) in modelValue.videos.slice(0,3)" @click="globalMethods.$no">
|
||||
@ -17,7 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<base-button type="white">换一个</base-button>
|
||||
<base-button type="info">换一个</base-button>
|
||||
<base-button type="primary">关注</base-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -246,7 +250,7 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -254,7 +258,7 @@ export default {
|
||||
|
||||
.content {
|
||||
width: 85%;
|
||||
background: white;
|
||||
background: linear-gradient(to bottom, rgb(71, 90, 110), rgb(97, 84, 75));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -281,25 +285,35 @@ export default {
|
||||
.name {
|
||||
margin-top: 20rem;
|
||||
margin-bottom: 20rem;
|
||||
font-weight: bold;
|
||||
font-size: 16rem;
|
||||
font-size: 20rem;
|
||||
letter-spacing: 4rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.age {
|
||||
font-size: 10rem;
|
||||
background: #f1f1f1;
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
|
||||
.tag {
|
||||
margin: 0 3rem;
|
||||
font-size: 10rem;
|
||||
background: rgba(161, 158, 156, 0.3);
|
||||
color: gainsboro;
|
||||
padding: 3rem 5rem;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.realName {
|
||||
text-align: center;
|
||||
color: black;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
color: gainsboro;
|
||||
border-top: 1px solid #5e5a5a;
|
||||
border-bottom: 1px solid #5e5a5a;
|
||||
padding: 10rem 0;
|
||||
margin: 15rem 0;
|
||||
font-size: 12rem;
|
||||
font-size: 14rem;
|
||||
letter-spacing: 1.5rem;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
@ -1,186 +1,184 @@
|
||||
<!--<script setup lang="jsx">-->
|
||||
<!--import {computed, onMounted, reactive, ref, watch} from "vue";-->
|
||||
<!--import GM from '../../utils'-->
|
||||
<!--import {-->
|
||||
<!-- getSlideDistance,-->
|
||||
<!-- slideInit,-->
|
||||
<!-- slideReset,-->
|
||||
<!-- slideTouchEnd,-->
|
||||
<!-- slideTouchMove,-->
|
||||
<!-- slideTouchStart-->
|
||||
<!--} from "./common";-->
|
||||
<!--import {SlideType} from "../../utils/const_var";-->
|
||||
<!--import SlideItem from "@/pages/slideHooks/SlideItem.vue";-->
|
||||
<!--import TestItem from "@/pages/slideComponent/TestItem.vue";-->
|
||||
<script setup lang="jsx">
|
||||
import {computed, onMounted, reactive, ref, watch} from "vue";
|
||||
import GM from '../../utils'
|
||||
import {
|
||||
getSlideDistance,
|
||||
slideInit,
|
||||
slideReset,
|
||||
slideTouchEnd,
|
||||
slideTouchMove,
|
||||
slideTouchStart
|
||||
} from "./common";
|
||||
import {SlideType} from "../../utils/const_var";
|
||||
import SlideItem from "@/pages/slideHooks/SlideItem.vue";
|
||||
import TestItem from "@/pages/slideComponent/TestItem.vue";
|
||||
|
||||
<!--const props = defineProps({-->
|
||||
<!-- index: {-->
|
||||
<!-- type: Number,-->
|
||||
<!-- default: () => {-->
|
||||
<!-- return 0-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- position: {-->
|
||||
<!-- type: Object,-->
|
||||
<!-- default: () => {-->
|
||||
<!-- return {}-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- render: {-->
|
||||
<!-- type: Function,-->
|
||||
<!-- default: () => {-->
|
||||
<!-- return null-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- list: {-->
|
||||
<!-- type: Array,-->
|
||||
<!-- default: () => {-->
|
||||
<!-- return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]-->
|
||||
<!-- }-->
|
||||
<!-- },-->
|
||||
<!-- virtualTotal: {-->
|
||||
<!-- type: Number,-->
|
||||
<!-- default: () => 5-->
|
||||
<!-- },-->
|
||||
<!-- name: {-->
|
||||
<!-- type: String,-->
|
||||
<!-- default: () => ''-->
|
||||
<!-- },-->
|
||||
<!--})-->
|
||||
<!--const emit = defineEmits(['update:index', 'loadMore'])-->
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: () => {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
render: {
|
||||
type: Function,
|
||||
default: () => {
|
||||
return null
|
||||
}
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
|
||||
}
|
||||
},
|
||||
virtualTotal: {
|
||||
type: Number,
|
||||
default: () => 5
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index', 'loadMore'])
|
||||
|
||||
<!--const judgeValue = 20-->
|
||||
<!--const wrapperEl = ref(null)-->
|
||||
<!--const state = reactive({-->
|
||||
<!-- name: 'SlideVertical',-->
|
||||
<!-- localIndex: props.index,-->
|
||||
<!-- needCheck: true,-->
|
||||
<!-- next: false,-->
|
||||
<!-- start: {x: 0, y: 0, time: 0},-->
|
||||
<!-- move: {x: 0, y: 0},-->
|
||||
<!-- wrapper: {width: 0, height: 0, childrenLength: 0},-->
|
||||
<!-- cs: [],-->
|
||||
<!-- styleTop: 0,-->
|
||||
<!-- components: {-->
|
||||
<!-- one: <SlideItem class=" gray">-->
|
||||
<!-- <div class="big">热点0</div>-->
|
||||
<!-- </SlideItem>,-->
|
||||
<!-- two: <SlideItem class=" gray">-->
|
||||
<!-- <div class="big">热点1</div>-->
|
||||
<!-- </SlideItem>,-->
|
||||
<!-- three: <SlideItem class=" gray">-->
|
||||
<!-- <div class="big">热点2</div>-->
|
||||
<!-- </SlideItem>,-->
|
||||
<!-- four: <SlideItem class=" gray">-->
|
||||
<!-- <div class="big">热点3</div>-->
|
||||
<!-- </SlideItem>,-->
|
||||
<!-- five: <SlideItem class=" gray">-->
|
||||
<!-- <div class="big">热点4</div>-->
|
||||
<!-- </SlideItem>,-->
|
||||
<!-- }-->
|
||||
<!--})-->
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: 'SlideVertical',
|
||||
localIndex: props.index,
|
||||
needCheck: true,
|
||||
next: false,
|
||||
start: {x: 0, y: 0, time: 0},
|
||||
move: {x: 0, y: 0},
|
||||
wrapper: {width: 0, height: 0, childrenLength: 0},
|
||||
cs: [],
|
||||
styleTop: 0,
|
||||
components: {
|
||||
one: <SlideItem class=" gray">
|
||||
<div class="big">热点0</div>
|
||||
</SlideItem>,
|
||||
two: <SlideItem class=" gray">
|
||||
<div class="big">热点1</div>
|
||||
</SlideItem>,
|
||||
three: <SlideItem class=" gray">
|
||||
<div class="big">热点2</div>
|
||||
</SlideItem>,
|
||||
four: <SlideItem class=" gray">
|
||||
<div class="big">热点3</div>
|
||||
</SlideItem>,
|
||||
five: <SlideItem class=" gray">
|
||||
<div class="big">热点4</div>
|
||||
</SlideItem>,
|
||||
}
|
||||
})
|
||||
|
||||
<!--function r(item, index = -1) {-->
|
||||
<!-- let node = props.render(item, state.localIndex, index === 0, props.position)-->
|
||||
<!-- return <SlideItem class="slideItemClassName">-->
|
||||
<!-- {node}-->
|
||||
<!-- </SlideItem>-->
|
||||
<!--}-->
|
||||
function r(item, index = -1) {
|
||||
let node = props.render(item, state.localIndex, index === 0, props.position)
|
||||
return <SlideItem class="slideItemClassName">
|
||||
{node}
|
||||
</SlideItem>
|
||||
}
|
||||
|
||||
<!--watch(-->
|
||||
<!-- () => props.index,-->
|
||||
<!-- (newVal) => {-->
|
||||
<!-- if (state.localIndex !== newVal) {-->
|
||||
<!-- state.localIndex = newVal-->
|
||||
<!-- GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)-->
|
||||
<!-- GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--)-->
|
||||
watch(
|
||||
() => props.index,
|
||||
(newVal) => {
|
||||
if (state.localIndex !== newVal) {
|
||||
state.localIndex = newVal
|
||||
GM.$setCss(wrapperEl.value, 'transition-duration', `300ms`)
|
||||
GM.$setCss(wrapperEl.value, 'transform', `translate3d(0,${getSlideDistance(state, SlideType.VERTICAL)}px, 0)`)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
<!--watch(-->
|
||||
<!-- () => props.list,-->
|
||||
<!-- (newVal) => {-->
|
||||
<!-- console.log('list', newVal)-->
|
||||
<!-- let half = (props.virtualTotal + 1) / 2-->
|
||||
<!-- if (state.localIndex >= half) {-->
|
||||
<!-- state.cs = newVal.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))-->
|
||||
<!-- state.styleTop = (state.localIndex - 2) * state.wrapper.height-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!--)-->
|
||||
watch(
|
||||
() => props.list,
|
||||
(newVal) => {
|
||||
console.log('list', newVal)
|
||||
let half = (props.virtualTotal + 1) / 2
|
||||
if (state.localIndex >= half) {
|
||||
state.cs = newVal.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))
|
||||
state.styleTop = (state.localIndex - 2) * state.wrapper.height
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
<!--onMounted(() => {-->
|
||||
<!-- slideInit(wrapperEl.value, state, SlideType.VERTICAL)-->
|
||||
<!-- state.cs = props.list.slice(0, props.virtualTotal).map((v, i) => r(v, i))-->
|
||||
<!--})-->
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value, state, SlideType.VERTICAL)
|
||||
state.cs = props.list.slice(0, props.virtualTotal).map((v, i) => r(v, i))
|
||||
})
|
||||
|
||||
<!--function touchStart(e) {-->
|
||||
<!-- slideTouchStart(e, wrapperEl.value, state)-->
|
||||
<!--}-->
|
||||
function touchStart(e) {
|
||||
slideTouchStart(e, wrapperEl.value, state)
|
||||
}
|
||||
|
||||
<!--function touchMove(e) {-->
|
||||
<!-- slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)-->
|
||||
<!--}-->
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
<!--function touchEnd(e) {-->
|
||||
<!-- slideTouchEnd(e, state, canNext, (isNext) => {-->
|
||||
<!-- console.log('state.localIndex', state.localIndex)-->
|
||||
<!-- let half = (props.virtualTotal + 1) / 2-->
|
||||
<!-- if (props.list.length > props.virtualTotal) {-->
|
||||
<!-- if (isNext) {-->
|
||||
<!-- if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {-->
|
||||
<!-- console.log('loadMore')-->
|
||||
<!-- emit('loadMore')-->
|
||||
<!-- }-->
|
||||
<!-- if (state.localIndex >= half && state.localIndex <= props.list.length - half) {-->
|
||||
<!-- console.log('push')-->
|
||||
<!-- // state.cs = props.list.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))-->
|
||||
<!-- state.cs.shift()-->
|
||||
<!-- state.cs.push(r(props.list[state.localIndex + (half - 1)]))-->
|
||||
<!-- state.styleTop = (state.localIndex - 2) * state.wrapper.height-->
|
||||
<!-- }-->
|
||||
<!-- } else {-->
|
||||
<!-- //这里先加个1，保持if表达式一致-->
|
||||
<!-- let judgeIndex = state.localIndex + 1-->
|
||||
<!-- if (judgeIndex >= half && judgeIndex <= props.list.length - half) {-->
|
||||
<!-- console.log('unshift')-->
|
||||
<!-- state.cs.unshift(r(props.list[state.localIndex - (half - 1)]))-->
|
||||
<!-- state.cs.pop()-->
|
||||
<!-- state.styleTop = (state.localIndex - 2) * state.wrapper.height-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- }-->
|
||||
<!-- if (state.localIndex < half) {-->
|
||||
<!-- console.log('--')-->
|
||||
<!-- state.styleTop = 0-->
|
||||
<!-- }-->
|
||||
function touchEnd(e) {
|
||||
slideTouchEnd(e, state, canNext, (isNext) => {
|
||||
console.log('state.localIndex', state.localIndex)
|
||||
let half = (props.virtualTotal + 1) / 2
|
||||
if (props.list.length > props.virtualTotal) {
|
||||
if (isNext) {
|
||||
if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex > half) {
|
||||
console.log('loadMore')
|
||||
emit('loadMore')
|
||||
}
|
||||
if (state.localIndex >= half && state.localIndex <= props.list.length - half) {
|
||||
console.log('push')
|
||||
// state.cs = props.list.slice(state.localIndex - 2, state.localIndex + 3).map((v, i) => r(v))
|
||||
state.cs.shift()
|
||||
state.cs.push(r(props.list[state.localIndex + (half - 1)]))
|
||||
state.styleTop = (state.localIndex - 2) * state.wrapper.height
|
||||
}
|
||||
} else {
|
||||
//这里先加个1，保持if表达式一致
|
||||
let judgeIndex = state.localIndex + 1
|
||||
if (judgeIndex >= half && judgeIndex <= props.list.length - half) {
|
||||
console.log('unshift')
|
||||
state.cs.unshift(r(props.list[state.localIndex - (half - 1)]))
|
||||
state.cs.pop()
|
||||
state.styleTop = (state.localIndex - 2) * state.wrapper.height
|
||||
}
|
||||
}
|
||||
}
|
||||
if (state.localIndex < half) {
|
||||
console.log('--')
|
||||
state.styleTop = 0
|
||||
}
|
||||
|
||||
<!-- }, null, SlideType.VERTICAL)-->
|
||||
<!-- slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)-->
|
||||
<!--}-->
|
||||
}, null, SlideType.VERTICAL)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
|
||||
<!--function canNext(isNext) {-->
|
||||
<!-- return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext));-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
function canNext(isNext) {
|
||||
return !((state.localIndex === 0 && !isNext) || (state.localIndex === props.list.length - 1 && isNext));
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--<template>-->
|
||||
<!-- <div class="slide v">-->
|
||||
<!-- <div class="slide-list flex-direction-column"-->
|
||||
<!-- ref="wrapperEl"-->
|
||||
<!-- @touchstart="touchStart"-->
|
||||
<!-- @touchmove="touchMove"-->
|
||||
<!-- @touchend="touchEnd"-->
|
||||
<!-- >-->
|
||||
<!-- <component :style='{top: state.styleTop + "px"}' :is="v" v-for="(v,i) in state.cs" :key="v.id"/>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</template>-->
|
||||
<template>
|
||||
<div class="slide v">
|
||||
<div class="slide-list flex-direction-column"
|
||||
ref="wrapperEl"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
>
|
||||
<component :style='{top: state.styleTop + "px"}' :is="v" v-for="(v,i) in state.cs" :key="v.id"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
测试用<component :is的方法是否可行。结论，可行。但是不实用。当list数据更新时，<component的表现形式为，不销毁组件，只更新props。
|
||||
|
||||
感觉会导致已经加载到的video，重新加载。但未经测试
|
||||
-->
|
||||
@ -131,8 +131,7 @@ function insertContent(list = props.list) {
|
||||
}
|
||||
|
||||
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)
|
||||
const app = createApp({
|
||||
render() {
|
||||
@ -160,61 +159,62 @@ function touchEnd(e) {
|
||||
emit('refresh')
|
||||
}
|
||||
slideTouchEnd(e, state, canNext, (isNext) => {
|
||||
if (isNext) {
|
||||
let half = (props.virtualTotal + 1) / 2
|
||||
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 half = (props.virtualTotal + 1) / 2
|
||||
if (props.list.length > props.virtualTotal) {
|
||||
if (isNext) {
|
||||
if (state.localIndex > props.list.length - props.virtualTotal && state.localIndex >= half) {
|
||||
emit('loadMore')
|
||||
}
|
||||
}
|
||||
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(`.${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()
|
||||
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))
|
||||
}
|
||||
$(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.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(`.${itemClassName}:last`).data('index')).unmount()
|
||||
// $(wrapperEl.value).find(".base-slide-item:last").remove()
|
||||
}
|
||||
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(`.${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)
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let addItemIndex = state.localIndex - 2
|
||||
let res = $(wrapperEl.value).find(`.${itemClassName}[data-index=${addItemIndex}]`)
|
||||
|
||||
if (state.wrapper.childrenLength > props.virtualTotal) {
|
||||
appInsMap.get($(wrapperEl.value).find(`.${itemClassName}:last`).data('index')).unmount()
|
||||
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(`.${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)
|
||||
slideReset(wrapperEl.value, state, SlideType.VERTICAL, emit)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user