feat: 轮播组件优化
This commit is contained in:
duanshuwen committed
1 parent
e5d908701f
commit
7f270dafe8
11 files changed
+227
-31
No files matched your search
@@ -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;"}
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"ChatMainList.js","sources":["pages/chat/ChatMainList.vue","E:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovWUdDaGF0Q1MvcGFnZXMvY2hhdC9DaGF0TWFpbkxpc3QudnVl"],"sourcesContent":["<template>\n <view class=\"chat-container\" @touchend=\"handleTouchEnd\">\n <!-- 顶部的背景 -->\n <chat-top-bg-img class=\"chat-container-bg\"></chat-top-bg-img>\n\n <!-- 顶部自定义导航栏 -->\n <view\n class=\"nav-bar-container\"\n :style=\"{\n paddingTop: statusBarHeight + 'px',\n backgroundColor: navBgColor,\n }\"\n >\n <chat-top-nav-bar @openDrawer=\"openDrawer\"></chat-top-nav-bar>\n </view>\n\n <view class=\"chat-container-msg-list\">\n <!-- logo栏 -->\n <chat-top-banner class=\"chat-container-top-bannar\"></chat-top-banner>\n\n <!-- 消息列表（可滚动区域） -->\n <scroll-view\n scroll-y\n :scroll-into-view=\"lastMsgId\"\n :scroll-with-animation=\"true\"\n class=\"area-msg-list\"\n >\n <view style=\"padding: 6px 12px\">\n <OneFeelMK001></OneFeelMK001>\n </view>\n <view style=\"padding: 6px 12px\">\n <OneFeelMK001></OneFeelMK001>\n </view>\n <view style=\"padding: 6px 12px\">\n <OneFeelMK001></OneFeelMK001>\n </view>\n\n <ResponseWrapper>\n <ResponseIntro />\n </ResponseWrapper>\n\n <view\n class=\"area-msg-list-content\"\n v-for=\"item in chatMsgList\"\n :key=\"item.msgId\"\n :id=\"item.msgId\"\n >\n <template v-if=\"item.msgType === MessageRole.AI\">\n <ChatCardAI class=\"message-item message-item-ai\" :text=\"item.msg\">\n <image\n v-if=\"\n item.msgContent && item.msgContent.type === MessageType.IMAGE\n \"\n src=\"/static/logo.png\"\n style=\"width: 100px; height: 100px\"\n ></image>\n <OneFeelMK001></OneFeelMK001>\n </ChatCardAI>\n </template>\n\n <template v-else-if=\"item.msgType === MessageRole.ME\">\n <ChatCardMine\n class=\"message-item message-item-mine\"\n :text=\"item.msg\"\n >\n </ChatCardMine>\n </template>\n <template v-else>\n <text class=\"message-item message-item-other\">{{ item.msg }}</text>\n </template>\n </view>\n <!-- 底部锚点（用于滚动到底部） -->\n <view :id=\"lastMsgId\"></view>\n </scroll-view>\n\n <!-- 输入框区域 -->\n <view class=\"footer-area\">\n <ChatMoreTips @replySent=\"handleReply\"></ChatMoreTips>\n <ChatQuickAccess @replySent=\"handleReply\"></ChatQuickAccess>\n\n <view class=\"area-input\">\n <!-- 发送语音 -->\n <view class=\"input-container-voice\">\n <image src=\"/static/input_voice_icon.png\"></image>\n </view>\n <!-- 输入框 -->\n <textarea\n class=\"textarea\"\n type=\"text\"\n placeholder=\"快速订票，呼叫服务\"\n cursor-spacing=\"65\"\n confirm-type=\"done\"\n v-model=\"inputMessage\"\n @confirm=\"sendMessage\"\n @touchend=\"handleNoHideKeyboard\"\n :confirm-hold=\"true\"\n auto-height\n :show-confirm-bar=\"false\"\n :hold-keyboard=\"holdKeyboard\"\n maxlength=\"300\"\n />\n <view class=\"input-container-send\" @click=\"sendMessage\">\n <image src=\"/static/input_send_icon.png\"></image>\n </view>\n </view>\n </view>\n </view>\n </view>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, getCurrentInstance, nextTick } from \"vue\";\nimport { ref, watch } from \"vue\";\nimport { defineEmits } from \"vue\";\nimport { onLoad } from \"@dcloudio/uni-app\";\nimport ChatTopBanner from \"./ChatTopBanner.vue\";\nimport ChatTopBgImg from \"./ChatTopBgImg.vue\";\nimport ChatTopNavBar from \"./ChatTopNavBar.vue\";\nimport ChatCardAI from \"./ChatCardAI.vue\";\nimport ChatCardMine from \"./ChatCardMine.vue\";\nimport ChatQuickAccess from \"./ChatQuickAccess.vue\";\nimport ChatMoreTips from \"./ChatMoreTips.vue\";\n\nimport { MessageRole, ChatModel, MessageType } from \"../../model/ChatModel\";\n\nimport OneFeelMK001 from \"../module/OneFeelMK001.vue\";\nimport ResponseIntro from \"@/components/ResponseIntro/index.vue\";\nimport ResponseWrapper from \"@/components/ResponseWrapper/index.vue\";\n\nconst instance = getCurrentInstance(); // 获取当前组件实例\n\n// 导航栏相关\nconst statusBarHeight = ref(20);\nconst navBgColor = ref(\"rgba(66, 173, 249, 0)\");\nconst navOpacity = ref(0);\n\nconst timer = ref(null);\nconst holdKeyboard = ref(false); // focus时，点击页面Line truncated
|
||||
{"version":3,"file":"ChatMainList.js","sources":["pages/chat/ChatMainList.vue","E:/Program Files/HBuilderX/plugins/uniapp-cli-vite/uniComponent:/RDovWUdDaGF0Q1MvcGFnZXMvY2hhdC9DaGF0TWFpbkxpc3QudnVl"],"sourcesContent":["<template>\n <view class=\"chat-container\" @touchend=\"handleTouchEnd\">\n <!-- 顶部的背景 -->\n <chat-top-bg-img class=\"chat-container-bg\"></chat-top-bg-img>\n\n <!-- 顶部自定义导航栏 -->\n <view\n class=\"nav-bar-container\"\n :style=\"{\n paddingTop: statusBarHeight + 'px',\n backgroundColor: navBgColor,\n }\"\n >\n <chat-top-nav-bar @openDrawer=\"openDrawer\"></chat-top-nav-bar>\n </view>\n\n <view class=\"chat-container-msg-list\">\n <!-- logo栏 -->\n <chat-top-banner class=\"chat-container-top-bannar\"></chat-top-banner>\n\n <!-- 消息列表（可滚动区域） -->\n <scroll-view\n scroll-y\n :scroll-into-view=\"lastMsgId\"\n :scroll-with-animation=\"true\"\n class=\"area-msg-list\"\n >\n <view style=\"padding: 6px 12px\">\n <OneFeelMK001></OneFeelMK001>\n </view>\n <view style=\"padding: 6px 12px\">\n <OneFeelMK001></OneFeelMK001>\n </view>\n <view style=\"padding: 6px 12px\">\n <OneFeelMK001></OneFeelMK001>\n </view>\n\n <ResponseWrapper>\n <ResponseIntro />\n <ImageSwiper />\n </ResponseWrapper>\n\n <view\n class=\"area-msg-list-content\"\n v-for=\"item in chatMsgList\"\n :key=\"item.msgId\"\n :id=\"item.msgId\"\n >\n <template v-if=\"item.msgType === MessageRole.AI\">\n <ChatCardAI class=\"message-item message-item-ai\" :text=\"item.msg\">\n <image\n v-if=\"\n item.msgContent && item.msgContent.type === MessageType.IMAGE\n \"\n src=\"/static/logo.png\"\n style=\"width: 100px; height: 100px\"\n ></image>\n <OneFeelMK001></OneFeelMK001>\n </ChatCardAI>\n </template>\n\n <template v-else-if=\"item.msgType === MessageRole.ME\">\n <ChatCardMine\n class=\"message-item message-item-mine\"\n :text=\"item.msg\"\n >\n </ChatCardMine>\n </template>\n <template v-else>\n <text class=\"message-item message-item-other\">{{ item.msg }}</text>\n </template>\n </view>\n <!-- 底部锚点（用于滚动到底部） -->\n <view :id=\"lastMsgId\"></view>\n </scroll-view>\n\n <!-- 输入框区域 -->\n <view class=\"footer-area\">\n <ChatMoreTips @replySent=\"handleReply\"></ChatMoreTips>\n <ChatQuickAccess @replySent=\"handleReply\"></ChatQuickAccess>\n\n <view class=\"area-input\">\n <!-- 发送语音 -->\n <view class=\"input-container-voice\">\n <image src=\"/static/input_voice_icon.png\"></image>\n </view>\n <!-- 输入框 -->\n <textarea\n class=\"textarea\"\n type=\"text\"\n placeholder=\"快速订票，呼叫服务\"\n cursor-spacing=\"65\"\n confirm-type=\"done\"\n v-model=\"inputMessage\"\n @confirm=\"sendMessage\"\n @touchend=\"handleNoHideKeyboard\"\n :confirm-hold=\"true\"\n auto-height\n :show-confirm-bar=\"false\"\n :hold-keyboard=\"holdKeyboard\"\n maxlength=\"300\"\n />\n <view class=\"input-container-send\" @click=\"sendMessage\">\n <image src=\"/static/input_send_icon.png\"></image>\n </view>\n </view>\n </view>\n </view>\n </view>\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, getCurrentInstance, nextTick } from \"vue\";\nimport { ref, watch } from \"vue\";\nimport { defineEmits } from \"vue\";\nimport { onLoad } from \"@dcloudio/uni-app\";\nimport ChatTopBanner from \"./ChatTopBanner.vue\";\nimport ChatTopBgImg from \"./ChatTopBgImg.vue\";\nimport ChatTopNavBar from \"./ChatTopNavBar.vue\";\nimport ChatCardAI from \"./ChatCardAI.vue\";\nimport ChatCardMine from \"./ChatCardMine.vue\";\nimport ChatQuickAccess from \"./ChatQuickAccess.vue\";\nimport ChatMoreTips from \"./ChatMoreTips.vue\";\n\nimport { MessageRole, ChatModel, MessageType } from \"../../model/ChatModel\";\n\nimport OneFeelMK001 from \"../module/OneFeelMK001.vue\";\nimport ResponseIntro from \"@/components/ResponseIntro/index.vue\";\nimport ResponseWrapper from \"@/components/ResponseWrapper/index.vue\";\nimport ImageSwiper from \"@/components/ImageSwiper/index.vue\";\n\nconst instance = getCurrentInstance(); // 获取当前组件实例\n\n// 导航栏相关\nconst statusBarHeight = ref(20);\nconst navBgColor = ref(\"rgba(66, 173, 249, 0)\");\nconst navOpacity = ref(0Line truncated
|
||||
Reference in new issue
Block a user