mini_read_space_front/pages/category/category.wxml

<!--pages/category/category.wxml-->
<view class="container">
  <!-- 顶部性别切换和搜索 -->
  <view class="header">
    <gender-tabs gender="{{gender}}" bind:switch="switchGender"/>
    <view class="search-box" bindtap="goToSearch">
      <icon type="search" size="22" color="#999"/>
      <input 
        type="text" 
        placeholder="请输入书名/口令搜索" 
        placeholder-class="placeholder"
        disabled="true"
      />
    </view>
  </view>

  <view class="content">
    <!-- 左侧分类列表 -->
    <scroll-view scroll-y class="category-list">
      <view 
        wx:for="{{categories}}" 
        wx:key="code"
        class="category-item {{currentCategory === item.code ? 'active' : ''}}" 
        data-category="{{item.code}}" 
        bindtap="switchCategory"
      >
        <text>{{item.name}}</text>
      </view>
    </scroll-view>

    <!-- 右侧书籍列表 -->
    <scroll-view 
      scroll-y 
      class="book-list"
      bindscrolltolower="onScrollToLower"
      lower-threshold="50"
    >
      <view class="book-item" 
        wx:for="{{bookList}}" 
        wx:key="id"
        bindtap="handleBookTap"
        data-id="{{item.id}}"
        data-wxbookid="{{item.wxBookId}}"
      >
        <image class="book-cover" src="{{item.cover}}" mode="aspectFill"/>
        <view class="book-info">
          <text class="book-title">{{item.title}}</text>
          <text class="book-desc">{{item.brief}}</text>
        </view>
      </view>
      
      <!-- 加载状态 -->
      <view class="loading" wx:if="{{loading}}">
        <text>加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view class="no-more" wx:if="{{!hasMore && bookList.length > 0}}">
        <text>没有更多了</text>
      </view>
      
      <!-- 暂无数据 -->
      <view class="empty" wx:if="{{!loading && bookList.length === 0}}">
        <text>暂无数据</text>
      </view>
    </scroll-view>
  </view>
</view>