112 lines
3.6 KiB
Plaintext
112 lines
3.6 KiB
Plaintext
<view class="feed-page">
|
|
<!-- 状态栏占位 -->
|
|
<view class="safe-top" style="height: {{statusBarHeight}}px"></view>
|
|
|
|
<!-- 顶部栏 -->
|
|
<view class="topbar">
|
|
<view class="topbar-logo">汪<text class="logo-accent">圈</text></view>
|
|
<view class="topbar-tabs">
|
|
<view
|
|
wx:for="{{feedTabs}}"
|
|
wx:key="key"
|
|
class="feed-tab {{activeTab === item.key ? 'feed-tab-active' : ''}}"
|
|
bindtap="onSwitchTab"
|
|
data-key="{{item.key}}"
|
|
>{{item.label}}</view>
|
|
</view>
|
|
<view class="topbar-actions">
|
|
<view class="topbar-btn" bindtap="onSearch">🔍</view>
|
|
<view class="topbar-btn {{hasUnread ? 'has-badge' : ''}}" bindtap="onNotify">🔔</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 故事圈 -->
|
|
<scroll-view class="stories-scroll" scroll-x="true" enhanced="true" show-scrollbar="false">
|
|
<!-- 我的故事 -->
|
|
<view class="story" bindtap="onMyStory">
|
|
<view class="story-ring story-ring-me">
|
|
<view class="story-inner" style="background: {{myAvatarGradient}}">
|
|
<text class="story-emoji">{{myEmoji}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="story-name">我的</text>
|
|
</view>
|
|
<!-- 关注的宠物故事 -->
|
|
<view
|
|
wx:for="{{stories}}"
|
|
wx:key="_id"
|
|
class="story"
|
|
bindtap="onStoryTap"
|
|
data-id="{{item._id}}"
|
|
>
|
|
<view class="story-ring {{item.hasNew ? '' : 'story-ring-seen'}}">
|
|
<view class="story-inner" style="background: {{item.gradient}}">
|
|
<text class="story-emoji">{{item.emoji}}</text>
|
|
</view>
|
|
</view>
|
|
<text class="story-name">{{item.name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 信息流 -->
|
|
<scroll-view
|
|
class="feed-scroll"
|
|
scroll-y="true"
|
|
enhanced="true"
|
|
show-scrollbar="false"
|
|
bindscrolltolower="onLoadMore"
|
|
refresher-enabled="true"
|
|
bindrefresherrefresh="onRefresh"
|
|
refresher-triggered="{{refreshing}}"
|
|
>
|
|
<!-- 骨架屏 -->
|
|
<view wx:if="{{loading && posts.length === 0}}" class="skeleton-wrap">
|
|
<view wx:for="{{[1,2,3]}}" wx:key="index" class="skeleton-card">
|
|
<view class="skeleton-header">
|
|
<view class="skeleton skeleton-avatar"></view>
|
|
<view class="skeleton-meta">
|
|
<view class="skeleton skeleton-line w60"></view>
|
|
<view class="skeleton skeleton-line w40"></view>
|
|
</view>
|
|
</view>
|
|
<view class="skeleton skeleton-img"></view>
|
|
<view style="padding: 20rpx 24rpx;">
|
|
<view class="skeleton skeleton-line w100"></view>
|
|
<view class="skeleton skeleton-line w80" style="margin-top:12rpx"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 帖子列表 -->
|
|
<post-card
|
|
wx:for="{{posts}}"
|
|
wx:key="_id"
|
|
post="{{item}}"
|
|
bind:likeChange="onLikeChange"
|
|
/>
|
|
|
|
<!-- 加载更多 -->
|
|
<view class="load-more" wx:if="{{loadingMore}}">
|
|
<view class="load-dot"></view>
|
|
<view class="load-dot load-dot-2"></view>
|
|
<view class="load-dot load-dot-3"></view>
|
|
</view>
|
|
|
|
<!-- 到底了 -->
|
|
<view class="end-tip" wx:if="{{!hasMore && posts.length > 0}}">
|
|
<text>— 已经到底啦，去遛遛狗吧 🐾 —</text>
|
|
</view>
|
|
|
|
<!-- 空态 -->
|
|
<view wx:if="{{!loading && posts.length === 0}}" class="empty-feed">
|
|
<text class="empty-emoji">🐾</text>
|
|
<text class="empty-title">还没有内容</text>
|
|
<text class="empty-desc">去附近找找小伙伴，或者发一条动态吧</text>
|
|
<view class="btn-primary empty-btn" bindtap="onGoPost">发第一条</view>
|
|
</view>
|
|
|
|
<view class="safe-bottom"></view>
|
|
<view style="height: {{tabBarHeight}}px"></view>
|
|
</scroll-view>
|
|
</view>
|