taro-book/src/pages/bookrack/index.tsx

import { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import Taro, { useDidHide, useDidShow } from '@tarojs/taro'
import { observer, inject } from 'mobx-react'
//==========components组件引用========================
import TopNavBar from '@src/components/TopNavBar/index'
import ScrollViewHoc from '@src/components/ScrollView'
import BookboxRowSmall from '@src/components/PupPetry/BookBox/BookboxRowSmall'
import { Store } from '@src/app'
import useApi from '@src/Hook/useApi'
import SwipeAction from '@src/components/SwipeAction'


interface Props {
    store: Store;
}
interface ContentData {
    current: number,
    total: number,
    size: number,
    records: any[]
}

const Index: React.FC<Props> = ({ store }) => {
    const { indexStore } = store
    const { bookrackList } = useApi(store.appInfoStore)
    const [readData, setReadData] = useState<ContentData>({
        current: 0,
        total: 0,
        size: 0,
        records: []
    })
    const [pageShow, setPageShow] = useState(false)
    const actions = (id) => {
        return [
            {
                text: '删除', backgroundColor: '#f44336', id, onClick: (id) => {
                    console.log("删除", id)
                }
            },
        ]
    };
    useEffect(() => {
        if (pageShow) {
            getList({ pageNum: 1, pageSize: 20 })
        }
        return () => {
            log("componentWillUnmount");
        };
    }, [pageShow]); // Dependency array, runs effect only once on mount and unmount

    // 使用 useDidShow 代替 onShow
    useDidShow(() => {
        setPageShow(true)
    });

    // 使用 useDidHide 如果需要在页面隐藏时做一些处理
    useDidHide(() => {
        setPageShow(false)
    });
    const getList = (params) => {
        bookrackList(params).then((res: any) => {
            setReadData(res.data.data)
            return res
        })
        return Promise.resolve(true)
    }
    const load = () => {
        return new Promise((resolve, reject) => {
            let { size, total, records } = readData
            let pageSize = size + 20
            if (records?.length >= total) {
                Taro.showToast({
                    title: '没有更多了~~',
                    duration: 2000,
                    icon: 'none'
                })
                reject()
                return
            } else {
                getList({ pageNum: 1, pageSize }).then(res => {
                    resolve(true)
                })
            }
        })
    }
    return <View>
        <ScrollViewHoc
            load={load}
            filterClassName={""}
            navHeight={indexStore.navHeight}

        >
            <View className={"index"}>
                {
                    readData?.records?.map((item: any, index: number) => {
                        return <View key={item.bookId} style={{ margin: '30rpx' }}>
                            <SwipeAction actions={actions(item.bookId)}>
                                <BookboxRowSmall {...item} />
                            </SwipeAction>
                        </View>
                    })
                }
            </View>
        </ScrollViewHoc>
    </View>
};
export default TopNavBar((inject('store')(observer(Index))), {
    title: '阅读记录'
});