| | |
| | | <template> |
| | | <view class="wrapper"> |
| | | <top-bar selectedTitleIndex="activity" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar> |
| | | |
| | | <view style="height: 50rpx;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="scroll-view-container" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100"> |
| | | <view class="waterfall"> |
| | |
| | | </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"> |
| | | <u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" |
| | |
| | | </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; |
| | | text-align: center; |
| | |
| | | } |
| | | } |
| | | |
| | | /* 空状态样式 */ |
| | | .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; |