communicate.wxml 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!-- 顶部Tab栏 -->
  2. <view class="tab-container">
  3. <scroll-view class="tab-scroll" scroll-x scroll-with-animation scroll-left="{{scrollLeft}}">
  4. <view
  5. wx:for="{{tabs}}"
  6. wx:key="id"
  7. class="tab-item {{activeTab === item.id ? 'active' : ''}}"
  8. bindtap="switchTab"
  9. data-id="{{item.id}}"
  10. id="tab-{{item.id}}"
  11. >
  12. {{item.name}}
  13. </view>
  14. </scroll-view>
  15. </view>
  16. <!-- 内容区域 - 使用scroll-view替代swiper实现更好的卡片列表性能 -->
  17. <scroll-view
  18. class="content-container"
  19. scroll-y
  20. style="height: calc(100vh - {{tabHeight}}px)"
  21. >
  22. <!-- 卡片列表 -->
  23. <view class="card-list">
  24. <block wx:for="{{currentData}}" wx:key="id">
  25. <view class="card">
  26. <!-- 用户信息 -->
  27. <view class="user-info">
  28. <image class="avatar" src="{{item.user.avatar}}"></image>
  29. <text class="username">{{item.user.name}}</text>
  30. <text class="time">{{item.createTime}}</text>
  31. </view>
  32. <!-- 内容 -->
  33. <view class="content">
  34. <text class="title">{{item.title}}</text>
  35. <text class="desc">{{item.content}}</text>
  36. <view class="images" wx:if="{{item.images && item.images.length}}">
  37. <block wx:for="{{item.images}}" wx:key="*this">
  38. <image
  39. src="{{item}}"
  40. mode="aspectFill"
  41. class="image"
  42. bindtap="previewImage"
  43. data-urls="{{item.images}}"
  44. data-current="{{item}}"
  45. />
  46. </block>
  47. </view>
  48. </view>
  49. <!-- 操作区 -->
  50. <view class="actions">
  51. <!-- 点赞 -->
  52. <view class="action-item" bindtap="handleLike" data-id="{{item.id}}" data-index="{{index}}">
  53. <image
  54. src="{{item.isLiked ? '/images/like-fill.svg' : '/images/like.svg'}}"
  55. class="action-icon like-icon {{item.isLiked ? 'active' : ''}}"
  56. mode="widthFix"
  57. ></image>
  58. <text class="action-text">{{item.likeCount}}</text>
  59. </view>
  60. <!-- 评论 -->
  61. <view class="action-item" bindtap="handleComment" data-id="{{item.id}}">
  62. <image
  63. src="/images/comment.svg"
  64. class="action-icon comment-icon"
  65. mode="widthFix"
  66. ></image>
  67. <text class="action-text">{{item.commentCount}}</text>
  68. </view>
  69. <!-- 收藏 -->
  70. <view class="action-item" bindtap="handleCollect" data-id="{{item.id}}" data-index="{{index}}">
  71. <image
  72. src="{{item.isCollected ? '/images/star-fill.svg' : '/images/star.svg'}}"
  73. class="action-icon collect-icon {{item.isCollected ? 'active' : ''}}"
  74. mode="widthFix"
  75. ></image>
  76. <text class="action-text">{{item.collectCount}}</text>
  77. </view>
  78. </view>
  79. </view>
  80. </block>
  81. <!-- 加载更多 -->
  82. <view class="load-more" wx:if="{{hasMore}}">
  83. <text>{{loading ? '加载中...' : '上拉加载更多'}}</text>
  84. </view>
  85. <view class="no-more" wx:else>
  86. <text>没有更多内容了</text>
  87. </view>
  88. </view>
  89. </scroll-view>
  90. <!-- 页面内容... -->
  91. <view class="fab-container" bindtap="navigateToPublish">
  92. <view class="fab-button">
  93. <view class="fab-icon">+</view>
  94. <view class="fab-text">发布</view>
  95. </view>
  96. </view>