From fd9e26e32a9ae7186ea45e4c80dbcf57eb823eb8 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 11 Feb 2023 17:20:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseButton.vue                |   7 +-
 src/components/slide/SlideUser.vue           |  46 ++-
 src/pages/slideHooks/VInfinite-Component.vue | 336 +++++++++----------
 src/pages/slideHooks/VInfinite.vue           |  96 +++---
 4 files changed, 251 insertions(+), 234 deletions(-)

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index b531723..2f72749 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -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;
diff --git a/src/components/slide/SlideUser.vue b/src/components/slide/SlideUser.vue
index 9808de2..1ff0a54 100644
--- a/src/components/slide/SlideUser.vue
+++ b/src/components/slide/SlideUser.vue
@@ -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%;
     }
 
diff --git a/src/pages/slideHooks/VInfinite-Component.vue b/src/pages/slideHooks/VInfinite-Component.vue
index 7519486..f98d01b 100644
--- a/src/pages/slideHooks/VInfinite-Component.vue
+++ b/src/pages/slideHooks/VInfinite-Component.vue
@@ -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('&#45;&#45;')-->
-<!--      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，重新加载。但未经测试
--->
\ No newline at end of file
diff --git a/src/pages/slideHooks/VInfinite.vue b/src/pages/slideHooks/VInfinite.vue
index 90996ef..9fef3f7 100644
--- a/src/pages/slideHooks/VInfinite.vue
+++ b/src/pages/slideHooks/VInfinite.vue
@@ -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)
 }