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

import { forwardRef, useEffect, useState } from 'react'
import { useDidHide, useDidShow } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { observer, inject } from 'mobx-react'
import './index.less'
//==========components组件引用========================
import TopNavBar from '@src/components/TopNavBar/index'
import ScrollViewHoc from '@src/components/ScrollView'
import BookboxRowBig from '@src/components/PupPetry/BookBox/BookboxRowBig'
import BookTypeTabs from '@src/components/PupPetry/BookTypeTabs'
import Empty from '@src/components/Empty'
import { Store } from '@src/app'
import useApi from '@src/Hook/useApi'
import { getBookCategoryList } from '@src/server/classify'
import Taro from '@tarojs/taro'

interface Props {
    store: Store;
}

const Index = forwardRef((props: Props) => {
    const { bookStore, appInfoStore, classifyStore } = props.store
    const { getBookPageList } = useApi(appInfoStore)
    const [pageShow, setPageShow] = useState(false)//防止小程序切换页面组件不会被真实卸载,阻止不必要的操作
    const [isFixed, setIsFixed] = useState(false)
    // 获取分类列表
    useEffect(() => {
        if (pageShow) {
            let { workDirection } = bookStore
            getBookCategoryList(workDirection)

        }
    }, [appInfoStore.token, bookStore.workDirection, pageShow]); // Dependency array, runs effect only once on mount and unmount
    //获取书籍列表
    useEffect(() => {
        if (pageShow) {
            let { workDirection } = bookStore
            let { categoryId } = classifyStore
            categoryId.id != 0 && classifyStore.categoryId && getList({ workDirection, categoryId: categoryId.id, pageNum: 1, pageSize: 10 })
        }
    }, [appInfoStore.token, bookStore.workDirection, classifyStore.categoryId, pageShow])
    // 使用 useDidShow 代替 onShow
    useDidShow(() => {
        setPageShow(true)
    });
    // 使用 useDidHide 如果需要在页面隐藏时做一些处理
    useDidHide(() => {
        setPageShow(false)
    });
    //上拉刷新
    const refresh = async () => {
        let { workDirection } = bookStore
        let { categoryId } = classifyStore
        getList({ workDirection, categoryId: categoryId.id, pageNum: 1, pageSize: 10 })
    }
    //下来加载
    const load = () => {
        return new Promise((resolve, reject) => {
            let { size, total, records } = bookStore.bookList
            let pageSize = size + 10
            let { workDirection } = bookStore
            let { categoryId } = classifyStore
            if (records?.length >= total) {
                Taro.showToast({
                    title: '没有更多了~~',
                    duration: 2000,
                    icon: 'none'
                })
                reject()
                return
            } else {
                getList({ workDirection, categoryId: categoryId.id, pageNum: 1, pageSize }).then(res => {
                    console.log("Res", res)
                    resolve(true)
                })
            }
        })
    }
    const getList = async (params) => {
        return getBookPageList(params)
    }
    return (
        <ScrollViewHoc load={load} refresh={refresh} callback={(num) => {
            // if(num > 100 && !isFixed){
            //     setIsFixed(true)
            // }
            // if(num <100 && isFixed){
            //     setIsFixed(false)
            // }
        }}>
            <View className='index'>
                {bookStore?.classifyData?.length > 0 && <View style={isFixed ? { position: 'fixed', background: "#fff" } : {background: "#fff"}}>
                    <BookTypeTabs typeValue={bookStore?.classifyData} typeTabIndex={classifyStore.categoryId} workDirection={bookStore.workDirection} ></BookTypeTabs>
                </View>}
                <View className='w  row for_top1 pd_btm'>
                    {
                        bookStore?.bookList?.records?.length > 0 ? bookStore?.bookList?.records?.map((item, index) => {
                            return <>
                                <View key={item.bookId} ><BookboxRowBig {...item} /></View>
                            </>
                        }) :
                            <Empty />
                    }
                </View>
            </View>
        </ScrollViewHoc>
    );
});
export default TopNavBar(inject('store')(observer(Index)), {
    tab: true,
    tabVal: [{ value: "男生", text: "男生" }, { value: "女生", text: "女生" }],
    backgroundColor: '#fff',
    color: "#333",
    search: false,
});