| | |
| | | <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: 50px"></view> |
| | | <!-- 内容区域 --> |
| | | <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"> |
| | | <!-- 遍历每列内容 --> |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="empty-state" v-if="mockData.length === 0 && !loading"> |
| | | <text>暂无内容,下拉刷新试试</text> |
| | | </view> |
| | | <!-- <view style="height: 150rpx;"></view> --> |
| | | <!-- 改进的加载更多提示 --> |
| | | <view class="load-more"> |
| | |
| | | [] |
| | | ]; |
| | | this.colHeight = [0, 0]; |
| | | |
| | | |
| | | this.mockData.forEach(item => { |
| | | const minIndex = this.colHeight.indexOf(Math.min(...this.colHeight)); |
| | | this.columns[minIndex].push(item); //获得高度更小的 放入元素 |
| | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | /* 空状态样式 */ |
| | | .empty-state { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | height: 50vh; |
| | | text-align: center; |
| | | color: #999; |
| | | text { |
| | | font-size: 28rpx; |
| | | } |
| | | } |
| | | /* 新增加载更多样式 */ |
| | | .load-more { |
| | | padding: 20rpx 0; |
| | |
| | | font-size: 26rpx; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .btn-container { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | margin-top: 8px; |
| | | /* 与上方标题保持间距 */ |
| | | } |
| | | |
| | | /* 全局样式优化 */ |
| | | .wrapper { |
| | | height: 100vh; |
| | |
| | | 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; |