- [目录详情] 增加正序倒序按钮

src/screens/discovery/catalog-detail/component/list/index.tsx

@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-09-06 15:35:53
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-10 23:09:02
+ * @Last Modified time: 2024-10-24 21:24:44
  */
 import React from 'react'
 import { PaginationList2 } from '@_'
@@ -23,7 +23,7 @@ function List({ onScroll }, { $ }: Ctx) {
       contentContainerStyle={_.container.bottom}
       keyExtractor={keyExtractor}
       numColumns={numColumns}
-      data={$.list}
+      data={$.state.reverse ? $.list.slice().reverse() : $.list}
       limit={12}
       ListHeaderComponent={<Info />}
       renderItem={renderItem}

src/screens/discovery/catalog-detail/component/tool-bar/index.tsx

@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2024-03-20 00:13:03
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-10 01:05:09
+ * @Last Modified time: 2024-10-24 21:12:45
  */
 import React from 'react'
 import { Button, ToolBar as ToolBarComp } from '@components'
@@ -11,6 +11,7 @@ import { obc } from '@utils/decorators'
 import { Ctx } from '../../types'
 import Collect from './collect'
 import Layout from './layout'
+import Reverse from './reverse'
 import Sort from './sort'
 import { COMPONENT } from './ds'
 import { styles } from './styles'
@@ -30,6 +31,7 @@ function ToolBar(_props, { $ }: Ctx) {
       >
         更新评分
       </Button>
+      <Reverse />
     </ToolBarComp>
   )
 }

src/screens/discovery/catalog-detail/component/tool-bar/reverse.tsx

@@ -0,0 +1,28 @@
+/*
+ * @Author: czy0729
+ * @Date: 2024-10-24 21:04:34
+ * @Last Modified by: czy0729
+ * @Last Modified time: 2024-10-24 21:11:40
+ */
+import React from 'react'
+import { ToolBar } from '@components'
+import { obc } from '@utils/decorators'
+import { Ctx } from '../../types'
+
+function Reverse(_props, { $ }: Ctx) {
+  return (
+    <ToolBar.Icon
+      iconStyle={{
+        transform: [
+          {
+            rotate: $.state.reverse ? '90deg' : '-90deg'
+          }
+        ]
+      }}
+      icon='md-arrow-back'
+      onSelect={$.onReverse}
+    />
+  )
+}
+
+export default obc(Reverse)

src/screens/discovery/catalog-detail/component/tool-bar/styles.ts

@@ -2,15 +2,15 @@
  * @Author: czy0729
  * @Date: 2022-08-26 15:36:24
  * @Last Modified by: czy0729
- * @Last Modified time: 2022-08-26 15:52:03
+ * @Last Modified time: 2024-10-24 21:13:00
  */
 import { _ } from '@stores'
 
 export const styles = _.create({
   btn: {
     width: 76,
     height: 30,
-    marginLeft: 4,
+    marginHorizontal: 4,
     borderRadius: 30
   }
 })

src/screens/discovery/catalog-detail/store/action.ts

@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2024-07-29 19:39:24
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-10 16:37:35
+ * @Last Modified time: 2024-10-24 21:05:54
  */
 import { discoveryStore, userStore } from '@stores'
 import { confirm, feedback, info, removeHTMLTag, updateVisibleBottom } from '@utils'
@@ -106,6 +106,15 @@ export default class Action extends Fetch {
     })
   }
 
+  /** 倒序 */
+  onReverse = () => {
+    const value = !this.state.reverse
+    this.setState({
+      reverse: value
+    })
+    this.save()
+  }
+
   /** 更新可视范围底部 y */
   onScroll = updateVisibleBottom.bind(this)
 

src/screens/discovery/catalog-detail/store/ds.ts

@@ -2,7 +2,7 @@
  * @Author: czy0729
  * @Date: 2022-08-26 15:21:40
  * @Last Modified by: czy0729
- * @Last Modified time: 2024-08-10 03:59:41
+ * @Last Modified time: 2024-10-24 21:03:11
  */
 import { _ } from '@stores'
 import { Loaded } from '@types'
@@ -40,6 +40,9 @@ export const STATE = {
   /** 收藏范围 */
   collect: COLLECT_DS[0].key as Collect,
 
+  /** 倒序 */
+  reverse: false,
+
   ...EXCLUDE_STATE,
   _loaded: false as Loaded
 }