feat: 轮播组件优化

unpackage/dist/dev/.sourcemap/mp-weixin/components/ImageSwiper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["components/ImageSwiper/index.vue","E:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovWUdDaGF0Q1MvY29tcG9uZW50cy9JbWFnZVN3aXBlci9pbmRleC52dWU"],"sourcesContent":["<template>\n  <view class=\"image-swiper\">\n    <swiper\n      class=\"swiper-box\"\n      :autoplay=\"false\"\n      :interval=\"3000\"\n      :duration=\"1000\"\n      :current=\"active\"\n    >\n      <swiper-item\n        class=\"swiper-item\"\n        v-for=\"(item, index) in thumbnails\"\n        :key=\"index\"\n      >\n        <image :src=\"item.url\" mode=\"aspectFill\"></image>\n      </swiper-item>\n    </swiper>\n\n    <view class=\"custom-indicator\">\n      图片{{ active + 1 }}/{{ thumbnails.length }}\n    </view>\n\n    <view class=\"thumbnail-box\">\n      <view\n        v-for=\"(thumb, index) in thumbnails\"\n        :key=\"index\"\n        class=\"thumbnail-item\"\n        @click=\"handleThumbnailClick(index)\"\n      >\n        <image :src=\"thumb.url\" mode=\"aspectFill\"></image>\n        <text>{{ thumb.description }}</text>\n      </view>\n    </view>\n  </view>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nconst active = ref(0);\n\nconst thumbnails = ref([\n  {\n    url: \"https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po\",\n    description: \"瑶山古寨\",\n  },\n  {\n    url: \"https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk\",\n    description: \"民俗表演\",\n  },\n  {\n    url: \"https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs\",\n    description: \"特色美食\",\n  },\n  {\n    url: \"https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo\",\n    description: \"传统服饰\",\n  },\n  {\n    url: \"https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo\",\n    description: \"其他\",\n  },\n]);\n\nconst handleThumbnailClick = (index) => {\n  active.value = index;\n};\n</script>\n\n<style scoped lang=\"scss\">\n@import \"./styles/index.scss\";\n</style>\n","import Component from 'D:/YGChatCS/components/ImageSwiper/index.vue'\nwx.createComponent(Component)"],"names":["ref"],"mappings":";;;;;AAuCA,UAAM,SAASA,cAAAA,IAAI,CAAC;AAEpB,UAAM,aAAaA,cAAAA,IAAI;AAAA,MACrB;AAAA,QACE,KAAK;AAAA,QACL,aAAa;AAAA,MACd;AAAA,MACD;AAAA,QACE,KAAK;AAAA,QACL,aAAa;AAAA,MACd;AAAA,MACD;AAAA,QACE,KAAK;AAAA,QACL,aAAa;AAAA,MACd;AAAA,MACD;AAAA,QACE,KAAK;AAAA,QACL,aAAa;AAAA,MACd;AAAA,MACD;AAAA,QACE,KAAK;AAAA,QACL,aAAa;AAAA,MACd;AAAA,IACH,CAAC;AAED,UAAM,uBAAuB,CAAC,UAAU;AACtC,aAAO,QAAQ;AAAA,IACjB;;;;;;;;;;;;;;;;;;;;;;;;;ACjEA,GAAG,gBAAgB,SAAS;"}