From b3e355148d99dd623a9da13360a578eb3fd2df0b Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Fri, 30 Dec 2022 13:55:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B0=B4=E7=89=8C=E9=80=BB=E8=BE=91?=
 =?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/views/Billboard/Billboard.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/views/Billboard/Billboard.vue b/src/views/Billboard/Billboard.vue
index 6dd8f84..df812df 100644
--- a/src/views/Billboard/Billboard.vue
+++ b/src/views/Billboard/Billboard.vue
@@ -54,15 +54,16 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { useRouter } from 'vue-router'
 import { getBrandListByFormat } from '@/http/brand/api'
 import QRCodeFromText from '@/components/QRCodeFromText/QRCodeFromText.vue'
-import { useMediaQuery } from '@vueuse/core'
+import { useMediaQuery, useWindowSize } from '@vueuse/core'
 
 const isH = useMediaQuery('(min-aspect-ratio: 1/1)')
+const { width } = useWindowSize()
 const timeout = 30000
 const heights = { shop: 44, format: 49, placeholder: 40 }
 const setValue = refInstance => value => Object.assign(refInstance, { value })
@@ -169,7 +170,11 @@ watch(shops, (formats, _, onCleanup) => {
     }
   }
 })
-
+watch(width, () => {
+  if (shops.value.length) {
+    setScrollWidth(listRef.value.scrollWidth)
+  }
+})
 watch(index, (nxt, _, onCleanup) => {
   if (nxt === null) return
   listRef.value.scrollLeft = scrollLefts.value[nxt]
@@ -188,7 +193,6 @@ watch(index, (nxt, _, onCleanup) => {
 
 watch(scrollWidth, _scrollWidth => {
   if (_scrollWidth > 0) {
-    console.log(Array.from(document.querySelectorAll('.shop')).map(el => el.getBoundingClientRect().left))
     const list = Array.from(document.querySelectorAll('.shop'))
       .map(el => el.getBoundingClientRect().left - (isH.value ? 1326 : 68))
       .reduce((acc, nxt) => {
@@ -201,7 +205,10 @@ watch(scrollWidth, _scrollWidth => {
 })
 watch(scrollLefts, _scrollLefts => {
   if (_scrollLefts.length > 1) {
-    setIndex(0)
+    setIndex(null)
+    nextTick(() => {
+      setIndex(0)
+    })
   }
 })
 </script>