119 lines
4.1 KiB
Plaintext
119 lines
4.1 KiB
Plaintext
<view class="feed-page">
|
|
<!-- 固定液态玻璃顶栏:标题 + 搜索图标(紧贴胶囊按钮) -->
|
|
<view class="glass-topbar">
|
|
<view style="height: {{statusBarHeight}}px;"></view>
|
|
<view class="navbar" style="height: {{navbarHeight}}px; padding-right: {{navbarPaddingRight}}px;">
|
|
<view class="topbar-logo">汪<text class="logo-accent">圈</text></view>
|
|
<view class="navbar-action" bindtap="onSearch">
|
|
<view class="icon-line icon-search-line"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 顶栏占位 -->
|
|
<view style="height: {{statusBarHeight + navbarHeight}}px; flex-shrink: 0;"></view>
|
|
|
|
<!-- 信息流:tabs、故事圈与帖子同在滚动区,下拉刷新只在真正顶部触发 -->
|
|
<scroll-view
|
|
class="feed-scroll"
|
|
scroll-y="true"
|
|
enhanced="true"
|
|
bounces="{{false}}"
|
|
show-scrollbar="false"
|
|
bindscrolltolower="onLoadMore"
|
|
refresher-enabled="true"
|
|
bindrefresherrefresh="onRefresh"
|
|
refresher-triggered="{{refreshing}}"
|
|
>
|
|
<!-- 次级菜单栏:信息流 tabs -->
|
|
<view class="subbar">
|
|
<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>
|
|
|
|
<!-- 故事圈 -->
|
|
<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>
|
|
|
|
<!-- 骨架屏 -->
|
|
<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>
|