feat: 修复wiki样式问题

pages/wiki/index.js

@@ -3,15 +3,28 @@ import { MOCK_WIKI } from '../../utils/mockData';
 
 Page({
     data: {
-        wikiList: [],
+        // Data Source (effectively the backend result)
+        filteredSourceList: [],
+
+        // Display Data (rendered list)
         displayedList: [],
+
+        // Filter State
         searchQuery: '',
         activeCategory: '全部',
+
+        // Pagination State
+        page: 1,
+        pageSize: 5,
+        isLoading: false,
+        hasMore: true,
+
+        // Modal State
         showIdentifyModal: false
     },
 
     onLoad() {
-        this.setData({ wikiList: MOCK_WIKI });
+        // Initial Load
         this.filterList();
     },
 
@@ -22,23 +35,29 @@ Page({
         }
     },
 
+    // Search Input Handler
     onSearchInput(e) {
-        // TDesign search event: e.detail.value
         this.setData({ searchQuery: e.detail.value }, () => {
             this.filterList();
         });
     },
 
+    // Category Filter Handler
     setCategory(e) {
         this.setData({ activeCategory: e.currentTarget.dataset.cat }, () => {
             this.filterList();
         });
     },
 
+    /**
+     * Simulates "Backend" Search & Filtering
+     * Resets pagination and prepares the filtered data source.
+     */
     filterList() {
-        const { wikiList, searchQuery, activeCategory } = this.data;
-        let result = wikiList;
+        const { searchQuery, activeCategory } = this.data;
+        let result = MOCK_WIKI;
 
+        // Filter by Search Query
         if (searchQuery) {
             const q = searchQuery.toLowerCase();
             result = result.filter(item =>
@@ -47,17 +66,73 @@ Page({
             );
         }
 
+        // Filter by Category
         if (activeCategory !== '全部') {
             result = result.filter(item => item.category.includes(activeCategory));
         }
 
-        this.setData({ displayedList: result });
+        this.setData({
+            filteredSourceList: result,
+            displayedList: [],
+            page: 1,
+            hasMore: true
+        }, () => {
+            this.loadMoreData();
+        });
+    },
+
+    /**
+     * Simulates "Backend" Pagination
+     * Appends the next page of data from filteredSourceList to displayedList.
+     * key-value data path update is used for performance optimization.
+     */
+    loadMoreData() {
+        const { isLoading, hasMore, page, pageSize, filteredSourceList, displayedList } = this.data;
+
+        if (isLoading || !hasMore) return;
+
+        this.setData({ isLoading: true });
+
+        // Simulate Network Delay
+        setTimeout(() => {
+            const startIndex = (page - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const newItems = filteredSourceList.slice(startIndex, endIndex);
+
+            const isLastPage = endIndex >= filteredSourceList.length;
+
+            if (newItems.length > 0) {
+                // Performance Optimization: Use data path to append items
+                // Instead of setData({ displayedList: [...old, ...new] })
+                const updateData = {};
+                const currentLen = displayedList.length;
+                newItems.forEach((item, index) => {
+                    updateData[`displayedList[${currentLen + index}]`] = item;
+                });
+
+                updateData['page'] = page + 1;
+                updateData['hasMore'] = !isLastPage;
+                updateData['isLoading'] = false;
+
+                this.setData(updateData);
+            } else {
+                this.setData({
+                    hasMore: false,
+                    isLoading: false
+                });
+            }
+        }, 500);
+    },
+
+    // Infinite Scroll Handler
+    onReachBottom() {
+        this.loadMoreData();
     },
 
     goToDetail(e) {
         const item = e.currentTarget.dataset.item;
         wx.navigateTo({
-            url: `/pages/plant-detail/index?id=${item.id}&mode=wiki`
+            url: `/pages/wiki/detail/index?id=${item.id}`
         });
     },