绿满眶商城微信小程序-uniapp
zxl
2025-09-12 2eb21bfe2f40630a46e675211f23b5f240e395a4
pages/mine/activity/reportActivity.vue
@@ -1,10 +1,14 @@
<template>
   <view class="wrapper">
      <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
      <view style="height: 100rpx;margin-top: 50px"></view>
      <view style="height: 50rpx;margin-top: 150rpx"></view>
      <u-empty v-if="mockData.length === 0 && !loading" style="margin-top: 130rpx;"
               mode="data"
               icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
      <!-- 内容区域 -->
      <scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
      <scroll-view scroll-y class="scroll-view-container" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100">
         <view class="waterfall">
            <view class="column" v-for="(column, index) in columns" :key="index">
               <!-- 遍历每列内容 -->
@@ -26,7 +30,8 @@
               </view>
            </view>
         </view>
         <!--    <view style="height: 150rpx;"></view> -->
         <!-- 改进的加载更多提示 -->
         <view class="load-more">
            <u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'"
@@ -165,7 +170,7 @@
               []
            ];
            this.colHeight = [0, 0];
            this.mockData.forEach(item => {
               const minIndex = this.colHeight.indexOf(Math.min(...this.colHeight));
               this.columns[minIndex].push(item); //获得高度更小的 放入元素
@@ -215,7 +220,8 @@
</script>
<style lang="scss">
   /* 新增加载更多样式 */
   /*新增加载更多样式 */
   .load-more {
      padding: 20rpx 0;
      text-align: center;
@@ -223,15 +229,6 @@
      font-size: 26rpx;
      background-color: #f8f9fa;
   }
   .btn-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 8px;
      /* 与上方标题保持间距 */
   }
   /* 全局样式优化 */
   .wrapper {
      height: 100vh;
@@ -240,13 +237,9 @@
      background-color: #f8f9fa;
   }
   /* 导航栏优化 */
   .u-navbar {
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
   }
   /* 内容区域优化 */
   .content {
   .scroll-view-container {
      flex: 1;
      overflow: hidden;
      padding: 0 20rpx;
@@ -364,26 +357,6 @@
      }
   }
   /* 空状态样式 */
   .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 60vh;
      text-align: center;
      image {
         width: 240rpx;
         opacity: 0.6;
         margin-bottom: 30rpx;
      }
      text {
         color: #c0c4cc;
         font-size: 28rpx;
      }
   }
   
   .topBar {
      position: fixed;