首页搜索

src/views/website/home/index.vue

@@ -1,5 +1,15 @@
 <template>
   <div v-loading="loading" class="fullPage" ref="fullPageRef">
+    <div class="indicator">
+      <div
+        :class="`${state.fullpage.current == idx ? 'active' : ''}`"
+        v-for="idx in len"
+        :key="idx"
+        :id="idx.toString()"
+        class="point"
+        @click="handleIndicatorClick(idx)"
+      ></div>
+    </div>
     <div
       class="fullPageContainer"
       :data-index="state.fullpage.current"
@@ -13,7 +23,11 @@
         :key="$index"
         :style="`z-index: ${item.zIndex};`"
       >
-        <component :is="item.comp"></component>
+        <!-- v-if="`index${state.fullpage.current}` == item.title" -->
+        <component
+          v-if="Math.abs(state.fullpage.current - ($index + 1)) <= 1"
+          :is="item.comp"
+        ></component>
       </div>
     </div>
   </div>
@@ -36,7 +50,14 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted, ref, shallowRef, onUnmounted } from "vue";
+import {
+  reactive,
+  onMounted,
+  ref,
+  shallowRef,
+  onUnmounted,
+  computed,
+} from "vue";
 import index1 from "./comp/index1.vue";
 import index2 from "./comp/index2.vue";
 import index3 from "./comp/index3.vue";
@@ -65,11 +86,13 @@ onMounted(() => {
 //   );
 //   console.log("cleard");
 // });
+const len = computed(() => state.boxList.length);
+// const len = ref(6);
 const next = () => {
   // 往下切换
   // TODO:
-  let len = 7; // 页面的个数
-  if (state.fullpage.current + 1 <= len) {
+  // let len = 6; // 页面的个数
+  if (state.fullpage.current + 1 <= len.value) {
     // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
     state.fullpage.current += 1; // 页面+1
     move(state.fullpage.current); // 执行切换
@@ -129,11 +152,11 @@ let state = reactive({
   },
   showBox: 0,
   boxList: [
-    // {
-    //   comp: shallowRef(index1),
-    //   zIndex: 1,
-    //   title: "index1",
-    // },
+    {
+      comp: shallowRef(index1),
+      zIndex: 1,
+      title: "index1",
+    },
     // {
     //   comp: shallowRef(index2),
     //   zIndex: 1,
@@ -175,6 +198,21 @@ let state = reactive({
     out: "animate__animated animate__fadeOutDown",
   },
 });
+
+// 点击 indicator 时
+const handleIndicatorClick = (idx: number) => {
+  if (idx == state.fullpage.current) {
+    return;
+  } else if (idx > state.fullpage.current) {
+    for (let i = state.fullpage.current; i < idx; i++) {
+      next();
+    }
+  } else {
+    for (let i = state.fullpage.current; i > idx; i--) {
+      pre();
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -182,6 +220,27 @@ let state = reactive({
   width: 100%;
   height: 100%;
   overflow: hidden;
+  position: relative;
+  .indicator {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    z-index: 999;
+    transform: translateY(-50%);
+    .point {
+      transition: all 1s;
+      width: 12px;
+      height: 12px;
+      background-color: #999;
+      border-radius: 50%;
+      &.active {
+        background-color: #0054ff;
+      }
+      &:not(:last-child) {
+        margin-bottom: 6px;
+      }
+    }
+  }
 }
 .fullPageContainer {
   width: 100%;