fix ui

miniprogram/pages/upload/upload.ts

@@ -64,6 +64,7 @@ Page({
     waterfallRight: [] as any[],
     stripCentered: true,
     todayKey: '',
+    animateWaterfall: true,
   },
 
   onLoad() {
@@ -933,9 +934,13 @@ Page({
         strip.push({ type: 'day', key: todayKey, weekday, day: today.getDate(), year: today.getFullYear(), month: today.getMonth() + 1 });
       }
       const stripCentered = strip.length <= 5;
-      this.setData({ dateStripItems: strip, imagesByDate, selectedDateKey: selectedKey, selectedDateImages: selectedImages, gridCols, selectedMonthTitle: monthTitle, useWaterfall, waterfallLeft, waterfallRight, stripCentered, todayKey });
+      this.setData({ dateStripItems: strip, imagesByDate, selectedDateKey: selectedKey, selectedDateImages: selectedImages, gridCols, selectedMonthTitle: monthTitle, useWaterfall, waterfallLeft, waterfallRight, stripCentered, todayKey, animateWaterfall: false });
       if (useWaterfall) {
-        this.balanceWaterfall(selectedImages);
+        this.balanceWaterfall(selectedImages).then(() => {
+          wx.nextTick(() => { this.setData({ animateWaterfall: true }); });
+        });
+      } else {
+        wx.nextTick(() => { this.setData({ animateWaterfall: true }); });
       }
     } catch (err) {
       console.error('重建日期条失败:', err);
@@ -953,10 +958,7 @@ Page({
     if (useWaterfall) {
       images.forEach((img, idx) => { (idx % 2 === 0 ? waterfallLeft : waterfallRight).push(img); });
     }
-    
-    // console.log('选择日期:', dateKey, '对应图片数量:', images.length);
-    
-    // 先设置基础数据，再处理瀑布流
+    this.setData({ animateWaterfall: false });
     this.setData({ 
       selectedDateKey: dateKey, 
       selectedDateImages: images, 
@@ -968,7 +970,11 @@ Page({
     }, () => {
       // 在setData回调中处理瀑布流平衡
       if (useWaterfall && images.length > 0) {
-        this.balanceWaterfall(images);
+        this.balanceWaterfall(images).then(() => {
+          wx.nextTick(() => { this.setData({ animateWaterfall: true }); });
+        });
+      } else {
+        wx.nextTick(() => { this.setData({ animateWaterfall: true }); });
       }
     });
   },

miniprogram/pages/upload/upload.wxml

@@ -33,14 +33,14 @@
           <view class="btn"></view>
           <view class="bottom"></view>
         </view>
-        <view class="photo-wrapper" wx:if="{{(todaySummary.length == 0 && groupedHistory.length == 0) || takePhoto}}">
+        <view class="photo-wrapper" wx:if="{{(!isLoading && todaySummary.length == 0 && groupedHistory.length == 0) || takePhoto}}">
           <view class="photo">
             <view class="photo-inner">
               <image class="photo-image" src="{{takePhoto ? photoPath : photoSvgData}}" mode="{{takePhoto ? 'widthFix' : 'aspectFit'}}"></image>
             </view>
           </view>
         </view>
-        <view wx:if="{{takePhoto && showExpandLayer }}" class="photo-expand-layer" style="{{photoExpandTransform}} {{photoExpandTransition}}">
+        <view wx:if="{{!isLoading && takePhoto && showExpandLayer }}" class="photo-expand-layer" style="{{photoExpandTransform}} {{photoExpandTransition}}">
           <view class="photo-expand-inner" style="{{photoExpandCurrentWidth ? ('width: ' + photoExpandCurrentWidth + 'px;') : ''}}">
             <!-- <view class="expand-border-bg" style="{{expandBorderStyle}}"></view> -->
             <image class="photo-expand-image" src="{{takePhoto ? photoPath : photoSvgData}}" mode="widthFix"></image>
@@ -92,13 +92,13 @@
           <block wx:else>
             <view class="waterfall">
               <view class="wf-col">
-                <view class="wf-item" wx:for="{{waterfallLeft}}" wx:key="index" catch:tap="onImageTap" data-image-id="{{item.image_id}}">
+                <view class="wf-item {{animateWaterfall ? 'fade-in' : ''}}" wx:for="{{waterfallLeft}}" wx:for-index="i" wx:key="image_id" catch:tap="onImageTap" data-image-id="{{item.image_id}}" style="animation-delay: {{i * 0.15}}s;">
                   <t-skeleton wx:if="{{item.thumbnail_loading}}" class="wf-image" row-col="{{[1]}}" animation="gradient" loading></t-skeleton>
                   <image wx:else class="wf-image" src="{{item.thumbnail_url}}" mode="widthFix" />
                 </view>
               </view>
               <view class="wf-col">
-                <view class="wf-item" wx:for="{{waterfallRight}}" wx:key="index" catch:tap="onImageTap" data-image-id="{{item.image_id}}">
+                <view class="wf-item {{animateWaterfall ? 'fade-in' : ''}}" wx:for="{{waterfallRight}}" wx:for-index="j" wx:key="image_id" catch:tap="onImageTap" data-image-id="{{item.image_id}}" style="animation-delay: {{j * 0.15 + 0.15}}s;">
                   <t-skeleton wx:if="{{item.thumbnail_loading}}" class="wf-image" row-col="{{[1]}}" animation="gradient" loading></t-skeleton>
                   <image wx:else class="wf-image" src="{{item.thumbnail_url}}" mode="widthFix" />
                 </view>

miniprogram/pages/upload/upload.wxss

@@ -121,6 +121,20 @@
 .wf-col { width: calc(50% - 6rpx); }
 .wf-item { margin-bottom: 12rpx; border-radius: 24rpx; overflow: hidden; background: #fff; }
 .wf-image { width: 100%; height: auto; display: block; --td-skeleton-text-height: 330rpx; }
+
+/* 瀑布流淡入动画 */
+@keyframes fadeInUp {
+  0% { opacity: 0; transform: translateY(12rpx); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+  opacity: 0;
+  animation-name: fadeInUp;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  animation-fill-mode: forwards;
+}
 .images-list {
   margin-top: 20rpx;
   width: 100%;
@@ -1262,4 +1276,4 @@
 .blank-image {
   width: 100%;
   height: 100%;
-}
+}