初始

pages/category/category.js

@@ -0,0 +1,126 @@
+// pages/category/category.js
+const { get } = require('../../utils/request');
+
+Page({
+  data: {
+    activeTab: 0,
+    categoryList: [],
+    infoList: [],
+    loading: false,
+    page: 1,
+    pageSize: 10,
+    hasMore: true
+  },
+
+  onLoad(options) {
+    this.initData();
+    
+    // 如果从首页跳转过来带有分类ID
+    if (options.id) {
+      const tabIndex = parseInt(options.id) - 1;
+      this.setData({ activeTab: tabIndex });
+    }
+  },
+
+  onShow() {
+    // 初始化 TabBar 选中状态
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().init();
+    }
+  },
+
+  onPullDownRefresh() {
+    this.refreshList().then(() => {
+      wx.stopPullDownRefresh();
+    });
+  },
+
+  onReachBottom() {
+    if (this.data.hasMore && !this.data.loading) {
+      this.loadMore();
+    }
+  },
+
+  // 初始化数据
+  async initData() {
+    // 模拟分类数据
+    this.setData({
+      categoryList: [
+        { id: 1, name: '科技' },
+        { id: 2, name: '财经' },
+        { id: 3, name: '教育' },
+        { id: 4, name: '健康' },
+        { id: 5, name: '生活' },
+        { id: 6, name: '娱乐' }
+      ]
+    });
+    
+    this.refreshList();
+  },
+
+  // 刷新列表
+  async refreshList() {
+    this.setData({ page: 1, hasMore: true, infoList: [] });
+    await this.loadList();
+  },
+
+  // 加载列表
+  async loadList() {
+    this.setData({ loading: true });
+    
+    // 模拟数据
+    setTimeout(() => {
+      const mockList = [
+        {
+          id: 1,
+          title: '分类信息标题示例',
+          summary: '这是分类信息的摘要内容...',
+          image: '/assets/images/info1.png',
+          time: '2小时前',
+          views: 1234
+        },
+        {
+          id: 2,
+          title: '第二条分类信息',
+          summary: '这是第二条信息的摘要...',
+          image: '/assets/images/info2.png',
+          time: '3小时前',
+          views: 856
+        }
+      ];
+      
+      this.setData({
+        infoList: [...this.data.infoList, ...mockList],
+        loading: false
+      });
+    }, 500);
+  },
+
+  // 加载更多
+  async loadMore() {
+    if (this.data.loading) return;
+    
+    const newPage = this.data.page + 1;
+    if (newPage > 3) {
+      this.setData({ hasMore: false });
+      return;
+    }
+    
+    this.setData({ page: newPage });
+    await this.loadList();
+  },
+
+  // 切换分类
+  onTabChange(e) {
+    this.setData({ activeTab: e.detail.index });
+    this.refreshList();
+  },
+
+  // 点击信息
+  onInfoTap(e) {
+    const { id } = e.currentTarget.dataset;
+    wx.navigateTo({
+      url: `/pages/detail/detail?id=${id}`
+    });
+  }
+});

pages/category/category.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "分类",
+  "enablePullDownRefresh": true,
+  "usingComponents": {}
+}

pages/category/category.wxml

@@ -0,0 +1,61 @@
+<!--pages/category/category.wxml-->
+<view class="container">
+  <!-- 分类标签 -->
+  <van-tabs
+    active="{{ activeTab }}"
+    bind:change="onTabChange"
+    sticky
+    swipeable
+  >
+    <van-tab
+      wx:for="{{ categoryList }}"
+      wx:key="id"
+      title="{{ item.name }}"
+    >
+      <!-- 信息列表 -->
+      <view class="info-list">
+        <view
+          class="info-item card"
+          wx:for="{{ infoList }}"
+          wx:for-item="info"
+          wx:key="id"
+          data-id="{{ info.id }}"
+          bindtap="onInfoTap"
+        >
+          <view class="info-content">
+            <view class="info-text">
+              <text class="info-title ellipsis-2">{{ info.title }}</text>
+              <text class="info-summary ellipsis">{{ info.summary }}</text>
+              <view class="info-meta">
+                <text class="info-time">{{ info.time }}</text>
+                <text class="info-views">{{ info.views }}阅读</text>
+              </view>
+            </view>
+            <van-image
+              wx:if="{{ info.image }}"
+              class="info-image"
+              width="180rpx"
+              height="120rpx"
+              fit="cover"
+              radius="8rpx"
+              src="{{ info.image }}"
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- 加载状态 -->
+      <view class="loading-section" wx:if="{{ loading }}">
+        <van-loading size="24px">加载中...</van-loading>
+      </view>
+
+      <!-- 没有更多 -->
+      <view class="no-more" wx:if="{{ !hasMore && infoList.length > 0 }}">
+        <text>— 没有更多了 —</text>
+      </view>
+
+      <!-- 空状态 -->
+      <van-empty wx:if="{{ !loading && infoList.length === 0 }}" description="暂无信息" />
+    </van-tab>
+  </van-tabs>
+</view>

pages/category/category.wxss

@@ -0,0 +1,71 @@
+/* pages/category/category.wxss */
+
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.info-list {
+  padding: 20rpx;
+}
+
+.info-item {
+  margin-bottom: 20rpx;
+}
+
+.info-content {
+  display: flex;
+  justify-content: space-between;
+}
+
+.info-text {
+  flex: 1;
+  margin-right: 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.info-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #333;
+  line-height: 1.5;
+  margin-bottom: 12rpx;
+}
+
+.info-summary {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 16rpx;
+}
+
+.info-meta {
+  display: flex;
+  align-items: center;
+  margin-top: auto;
+}
+
+.info-time {
+  font-size: 22rpx;
+  color: #999;
+}
+
+.info-views {
+  font-size: 22rpx;
+  color: #999;
+  margin-left: 20rpx;
+}
+
+.loading-section {
+  display: flex;
+  justify-content: center;
+  padding: 40rpx;
+}
+
+.no-more {
+  text-align: center;
+  padding: 40rpx;
+  color: #999;
+  font-size: 24rpx;
+}