feat: 回退tours

packages/qjkankan-kankan-view/src/components/Controls/tours.mobile.vue

@@ -76,7 +76,7 @@
   </div>
 </template>
 <script setup>
-import { computed, inject, onMounted, watch, ref, nextTick } from "vue";
+import { computed, inject, onMounted, watch,watchEffect, ref, nextTick } from "vue";
 import { Scrollbar, Dialog } from "@/global_components";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
@@ -126,12 +126,6 @@ const isPlay = computed(() => {
 const isInit = ref(false);
 const tours = computed(() => {
   let tours = store.getters["tour/tours"];
-  if (tours.length > 0) {
-    if (tourScroll.value && !isInit.value) {
-      isInit.value = true;
-      new Scrollbar(tourScroll.value, { onlyHorizontal: true });
-    }
-  }
   return tours;
 });
 const onModeChange = (name) => {
@@ -361,6 +355,12 @@ onMounted(() => {
     let player = document.querySelector('.player[name="main"]');
     player.addEventListener("click", onClickHandler);
   });
+  watchEffect(() => {
+    if (tours.length > 0 && tourScroll.value && !isInit.value) {
+      isInit.value = true;
+      new Scrollbar(tourScroll.value, { onlyHorizontal: true });
+    }
+  });
 });
 </script>
 

packages/qjkankan-kankan-view/src/components/Controls/tours.vue

@@ -82,6 +82,7 @@ import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import common from "@/utils/common";
 import { useMusicPlayer } from "@/utils/sound";
+import { watchEffect } from "vue";
 const musicPlayer = useMusicPlayer();
 
 const spanlength = ref(5);
@@ -127,14 +128,9 @@ const isPlay = computed(() => {
 const isInit = ref(false);
 const tours = computed(() => {
   let tours = store.getters["tour/tours"];
-  if (tours.length > 0) {
-    if (tourScroll.value && !isInit.value) {
-      isInit.value = true;
-      new Scrollbar(tourScroll.value, { onlyHorizontal: true });
-    }
-  }
   return tours;
 });
+
 const onModeChange = (name) => {
   store.commit("setMode", name);
 };
@@ -358,6 +354,13 @@ onMounted(() => {
     let player = document.querySelector('.player[name="main"]');
     player.addEventListener("click", onClickHandler);
   });
+  
+  watchEffect(() => {
+    if (tours.length > 0 && tourScroll.value && !isInit.value) {
+      isInit.value = true;
+      new Scrollbar(tourScroll.value, { onlyHorizontal: true });
+    }
+  });
 });
 </script>