karamay_wx/pages/collection/index.wxml

<!--pages/collection/index.wxml-->
<view class="collection-container">
  <!-- 顶部导航和搜索区域 -->
  <view class="top-section">
    <!-- 顶部导航栏 -->
    <view class="nav-scroll-container">
      <scroll-view class="category-menu" scroll-x="true">
        <view class="category-item {{activeCategory === 'all' ? 'active' : ''}}" bindtap="selectCategory" data-type="all">
          <text class="category-text">全部</text>
        </view>
        <view class="category-item {{activeCategory === item.id ? 'active' : ''}}" wx:for="{{categories}}" wx:key="id" bindtap="selectCategory" data-type="{{item.id}}">
          <text class="category-text">{{item.name}}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-input">
        <input type="text" placeholder="请输入要搜索的内容..." value="{{searchText}}" bindinput="onSearchInput" bindconfirm="onSearch" />
        <view class="search-icon" wx:if="{{!searchText}}" bindtap="onSearch">
          <icon class="icon-small" type="search" size="24"></icon>
        </view>
        <view class="clear-icon" wx:if="{{searchText}}" bindtap="onSearchClear">
          <text class="iconfont">✕</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 内容区域 -->
  <scroll-view class="content-section" scroll-y="true" bindscrolltolower="onReachBottom">
    <view class="collection-list">
      <view class="collection-item" wx:for="{{artifactList}}" wx:key="artifactId" bindtap="goCollectDetail" data-item="{{item}}">
        <view class="item-image-container">
          <image class="item-image" src="{{item.img}}" mode="aspectFill"></image>
          <view class="view-button">
            <text>查看</text>
            <text class="arrow">→</text>
          </view>
          <view class="item-info">
            <view class="item-category">{{item.category || '三维文物'}}</view>
            <view class="item-title">{{item.title || '未知标题'}}</view>
            <view class="item-description">{{item.remark || '暂无描述'}}</view>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view wx:if="{{loading}}" class="loading-container">
        <view class="loading-text">加载中...</view>
      </view>

      <!-- 没有更多数据 -->
      <view wx:if="{{!hasMore && artifactList.length > 0}}" class="no-more-container">
        <view class="no-more-text">没有更多数据了</view>
      </view>

      <!-- 暂无数据 -->
      <view wx:if="{{!loading && artifactList.length === 0}}" class="empty-container">
        <view class="empty-text">暂无数据</view>
      </view>
    </view>
  </scroll-view>
</view>