diff --git a/components/DynamicIsland.vue b/components/DynamicIsland.vue index 32f28c2..068aa26 100644 --- a/components/DynamicIsland.vue +++ b/components/DynamicIsland.vue @@ -16,29 +16,54 @@ > - - {{ title }} - - - - - - - - {{ getStatNumber("权益") }} - 权益 - - - {{ getStatNumber("时间银行") }} - 时间银行 - - - - - {{ actionText }} - - - + + @@ -61,6 +86,10 @@ export default { isCompact: { type: Boolean, default: false, + }, + styleType: { + type: String, + default: "", }, isFixed: { type: Boolean, @@ -82,6 +111,12 @@ export default { type: String, default: "暂停", }, + // 新增页面标识符，用于区分不同页面的灵动岛实例 + pageId: { + + type: String, + default: 'default_page' + }, }, data() { return { @@ -172,21 +207,32 @@ export default { }, // 添加滚动监听 addScrollListener() { - // 监听全局页面滚动事件 - uni.$on("pageScroll", this.handlePageScroll); + // 只监听带页面ID的滚动事件，避免不同页面间的状态冲突 + const eventName = `pageScroll_${this.pageId}`; + console.log('DynamicIsland 添加滚动监听:', eventName); + uni.$on(eventName, this.handlePageScroll); }, // 移除滚动监听 removeScrollListener() { - // 移除全局页面滚动监听 - uni.$off("pageScroll", this.handlePageScroll); + // 移除带页面ID的滚动监听 + const eventName = `pageScroll_${this.pageId}`; + uni.$off(eventName, this.handlePageScroll); }, // 处理页面滚动 handlePageScroll(e) { const scrollTop = e.scrollTop || e; const shouldScroll = scrollTop > this.scrollThreshold; + + console.log('DynamicIsland 接收到滚动事件:', { + pageId: this.pageId, + scrollTop, + shouldScroll, + currentIsScrolled: this.isScrolled + }); if (this.isScrolled !== shouldScroll) { this.isScrolled = shouldScroll; + console.log('DynamicIsland 状态切换:', shouldScroll ? '紧凑模式' : '展开模式'); // 添加触觉反馈 if (uni.vibrateShort) { @@ -270,11 +316,15 @@ export default { margin: 24rpx auto 24rpx; z-index: 100; - background: #000000; + background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(20rpx); + -webkit-backdrop-filter: blur(20rpx); + border: 1rpx solid rgba(255, 255, 255, 0.1); border-radius: 40rpx; + box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3), + 0 0 0 1rpx rgba(255, 255, 255, 0.05) inset; - transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; // 展开状态 @@ -290,7 +340,7 @@ export default { .expanded-content { opacity: 0; visibility: hidden; - transition: opacity 0.2s ease-out, visibility 0s linear 0.2s; + transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; } } @@ -298,7 +348,7 @@ export default { .compact-content { opacity: 0; visibility: hidden; - transition: opacity 0.2s ease-out, visibility 0s linear 0.2s; + transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; } } @@ -309,8 +359,8 @@ export default { transform: translateX(-50%); z-index: 998; margin: 0; - transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); - animation: slideInFromTop 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + animation: slideInFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } } @@ -321,7 +371,7 @@ export default { padding: 24rpx 32rpx; opacity: 1; visibility: visible; - transition: opacity 0.3s ease-in 0.4s, visibility 0s linear 0s; + transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; } .top-section { @@ -461,7 +511,7 @@ export default { padding: 0 24rpx; opacity: 1; visibility: visible; - transition: opacity 0.3s ease-in 0.4s, visibility 0s linear 0s; + transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; } .compact-name { @@ -513,4 +563,22 @@ export default { // } // } // } +.action-text-box{ + color: white; + + .action-text-box-des{ + font-size: 20rpx; + } + .action-text-box-msg{ + font-size: 24rpx; + display: flex; + align-items: center; + margin-top: 20rpx; + } + .action-text-box-img{ + width: 57rpx; + height: 46rpx; + margin-right: 10rpx; + } +} diff --git a/components/WaterfallLayout.vue b/components/WaterfallLayout.vue index 9191858..4733d39 100644 --- a/components/WaterfallLayout.vue +++ b/components/WaterfallLayout.vue @@ -27,14 +27,10 @@ {{ item.title }} - {{ - item.description - }} - - {{ - tag - }} - + +