fix

src/components/TopNavBar/index1.tsx

@@ -0,0 +1,175 @@
+
+import { View, Text, Image } from '@tarojs/components'
+import './index.less'
+import Taro from '@tarojs/taro'
+import { Component } from 'react';
+import searchPng from '../../icon/search.png'
+import { observer, inject } from 'mobx-react'
+import { BookStore } from '@src/store/book';
+import indexStore from '@src/store/index';
+/**顶部自定义导航
+ * 
+ */
+type Props = {
+    children?: JSX.Element,             // 
+    backgroundColor?: string,           // navbar 背景色
+    color?: string                      // 头部显示内容 颜色
+    fontSize?: number,                  // 头部显示内容字体大小
+    title?: string,                     // 头部显示内容
+    tab?: boolean,                      // 是否是tab类型
+    tabVal?: {                          // tabs 内容
+        text: number | string,                   // 展示内容
+        value: number | string                   // 选中传回内容
+    }[],
+    tabSelect?: string,                   // tab默认展示第几个
+    search?: boolean,                   // 是否展示搜索按钮
+    searchBack?: boolean,            // 点击搜索触发
+    isToBack?: boolean,                 // 是否可返回上一页
+    zxTitle?: string,                   // 资讯头
+    lastRead?: boolean,                 // 是否展示上次阅读
+    isReloadBook?: boolean //是否阅读小说，小说展示小说名称
+    store?: any,
+    extraProp?: any,
+    passThroughProps?: any
+}
+
+
+// function CustomNavbar(props: Props) {
+//     let { children, title, color, fontSize, backgroundColor, tab = false, tabVal, search = false, searchBack = false, isToBack = false, isReloadBook = false } = props
+//     interface Page {
+//         props: {
+//             store: {
+//                 indexStore: {
+//                     navBarTop: number,
+//                 },
+//                 bookStore: BookStore
+//             },
+//             extraProp: any,
+//             passThroughProps: any
+//         }
+//     }
+
+
+//     return Page
+// }
+interface CustomNavbar {
+    props: Props
+}
+@inject('store')
+@observer
+class CustomNavbar extends Component {
+    state = {
+        navBar: 0,
+        capsuleWidth: 0,
+        navBarTop: 0,
+
+    }
+    componentDidMount() {
+        const { indexStore: { navBarTop } } = this.props.store
+        let buttonBounding = Taro.getMenuButtonBoundingClientRect()
+        log(buttonBounding);
+        let { height, top, width } = buttonBounding
+        let navBar = (top - navBarTop) * 2 + height + 8
+        this.setState({ capsuleWidth: width + 10, navBar, navBarTop })
+        indexStore.setData({ navHeight: navBar + navBarTop + 5 })
+    }
+
+    selectHandle = (value: string | number) => {
+        console.log(value)
+        this.props.store.bookStore.setWorkDirection(value as 0 | 1)
+    }
+    //回上级
+    gotoBack = () => {
+        let pages = Taro.getCurrentPages(); //获取当前页面栈
+        if (pages?.length > 1) {
+            Taro.navigateBack()
+        } else {
+            this.gotoHome()
+        }
+    }
+    //回主页
+    gotoHome = () => {
+        Taro.switchTab({
+            url: '/pages/index/index'
+        })
+    }
+    // 去搜索页面
+    searchBackHandle = () => {
+        Taro.navigateTo({
+            url: '/pages/search/index'
+        })
+    }
+    componentDidUpdate(props) {
+        let oldNavBarTop = this.state.navBarTop
+        let newNavBarTop = this.props.store.indexStore.navBarTop
+        if (oldNavBarTop !== newNavBarTop) {
+            let buttonBounding = Taro.getMenuButtonBoundingClientRect()
+            log(buttonBounding);
+            let { height, top, width } = buttonBounding
+            this.setState({ capsuleWidth: width + 10, navBar: (top - newNavBarTop) * 2 + height + 8, navBarTop: newNavBarTop })
+
+        }
+
+    }
+
+    render() {
+        const { extraProp, ...passThroughProps } = this.props
+        let { children, title, color, fontSize, backgroundColor, tab = false, tabVal, search = false, searchBack = false, isToBack = false, isReloadBook = false } = this.props
+        let { navBar, capsuleWidth } = this.state
+        const { indexStore: { navBarTop }, bookStore } = this.props.store
+        let stateIndex = bookStore.workDirection
+        return <View style={{ height: '100vh' }}>
+            <View className='navbarWrap' style={{ paddingTop: navBarTop + 5, height: navBar, backgroundColor: isReloadBook ? bookStore.bookConfig?.off_on ? "#FFF" : "#363738" : "#FFF" }}>
+                <View className='content'>
+                    {
+                        tab ? <View className="navbar">
+                            <View className="tabs">
+                                {
+                                    tabVal?.map((item) => {
+                                        return <View className={`tab ${item.value === stateIndex ? 'select' : ''}`} onClick={() => { this.selectHandle(item.value) }}>
+                                            <Text>{item.text}</Text>
+                                            {
+                                                item.value === stateIndex && <View></View>
+                                            }
+                                        </View>
+                                    })
+                                }
+                            </View>
+                            {
+                                search && <View className="search">
+                                    <Image src={searchPng} className="searchImg" onClick={this.searchBackHandle} />
+                                </View>
+                            }
+                        </View>
+                            :
+                            children ?
+                                children :
+                                <View className="title" style={{ color: color ? color : "#333333", fontSize: fontSize ? Taro.pxTransform(fontSize) : Taro.pxTransform(48) }}>
+                                    {
+                                        isToBack && <View className="back" >
+                                            <View style={{ backgroundColor: color === '#fff' ? '#fff' : '#fff' }}>
+                                                <View onClick={this.gotoBack} className="backBt">
+                                                    <Image src={require('../../icon/backBlock.png')} className="searchImg" onClick={() => { }} />
+                                                </View>
+                                                <View className="line" style={{ backgroundColor: color === '#fff' ? '#e9e9e9' : '#e9e9e9' }}></View>
+                                                <View onClick={this.gotoHome} className="homebt">
+                                                    <Image src={require('../../icon/homeBlock.png')} className="searchImg" onClick={() => { }} mode='widthFix' />
+                                                </View>
+                                            </View>
+                                        </View>
+                                    }
+                                    <View className="txt" style={{ color: color ? color : "#333333", textAlign: isReloadBook ? 'center' : "unset" }}>{isReloadBook ? bookStore.openBookData?.bookName : title}</View>
+                                </View>
+                    }
+                </View>
+                <View style={{ width: capsuleWidth + 'px' }}></View>
+            </View>
+            <View style={{ paddingTop: (navBar + navBarTop + 5), height: `clac(100vh - ${(navBar + navBarTop + 5)}px)`, boxSizing: 'border-box' }}>
+                {/* <WrappedComponent {...passThroughProps} stateIndex={stateIndex} navBar={navBar + navBarTop + 5} />
+                 */}
+                {children}
+            </View>
+        </View>
+    }
+}
+export default CustomNavbar

src/pages/index/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { observer, inject } from 'mobx-react';
 import { useDidHide, useDidShow } from '@tarojs/taro';
 //==========components组件引用========================
-import TopNavBar from '@src/components/TopNavBar';
+import TopNavBar1 from '@src/components/TopNavBar/index1';
 import ScrollViewHoc from '@src/components/ScrollView';
 import { Store } from '@src/app';
 import useApi from '@src/Hook/useApi';
@@ -144,7 +144,7 @@ const Index: React.FC<Props> = ({ store }) => {
     }
     //下拉加载
     const load = async () => {
-        if(indexConfig['guess_like']){
+        if (indexConfig['guess_like']) {
             return new Promise((resolve, reject) => {
                 let { size, total, records } = indexStore?.indexGuessLike?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]
                 let pageSize = size + 20
@@ -164,134 +164,137 @@ const Index: React.FC<Props> = ({ store }) => {
         }
     }
     return <ScrollViewHoc load={load} filterClassName='.searchTs' navHeight={indexStore.navHeight}>
-        <View style={{ display: "flex", flexFlow: 'column' }}>
-            {/* 轮播 */}
-            {indexConfig['banners'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BannerBox data={indexStore?.indexBanners || []} />
-            </View>}
-            {/* 今日热门 */}
-            {indexConfig['hot_books'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexHotBooks?.showRightButton} title={indexStore?.indexHotBooks?.name || "今日热书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
-                    Taro.navigateTo({ url: `/pages/indexMore/index?title=今日热书&dataName=indexHotBooks` })
-                }}></BookHead>
-                <View ><BookboxRowMiddle {...indexStore?.indexHotBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.[0]} /></View>
-                <View className='w row'>
-                    {
-                        indexStore?.indexHotBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
-                            if (index > 0 && index < 5) {
+        <TopNavBar1 {...{
+            tab: true,
+            tabVal: [{ value: 0, text: "男生" }, { value: 1, text: "女生" }],
+            backgroundColor: '#fff',
+            color: "#333",
+            search: true,
+        }}>
+            <View style={{ display: "flex", flexFlow: 'column' }}>
+                {/* 轮播 */}
+                {indexConfig['banners'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BannerBox data={indexStore?.indexBanners || []} />
+                </View>}
+                {/* 今日热门 */}
+                {indexConfig['hot_books'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexHotBooks?.showRightButton} title={indexStore?.indexHotBooks?.name || "今日热书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+                        Taro.navigateTo({ url: `/pages/indexMore/index?title=今日热书&dataName=indexHotBooks` })
+                    }}></BookHead>
+                    <View ><BookboxRowMiddle {...indexStore?.indexHotBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.[0]} /></View>
+                    <View className='w row'>
+                        {
+                            indexStore?.indexHotBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
+                                if (index > 0 && index < 5) {
+                                    return <View key={index}><BookboxColumnSmall {...item} /></View>
+                                }
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 热门分类 */}
+                {indexConfig['hot_category'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexHotCategory?.showRightButton} title={indexStore?.indexHotCategory?.name || "热门分类"} fitTitle="全部分类" imgUrl={require('../../icon/right.png')} fitOnBack={() => { Taro.switchTab({ url: '/pages/classify/index' }) }} />
+                    <BookHotTabs hotValue={indexStore?.indexHotCategory?.bookCategoryList || []} onBack={(value) => {
+                        getHotBooks(value)
+                    }} />
+                    <View className='w row4'>
+                        {
+                            bookStore?.bookList?.records?.map((item, index) => {
                                 return <View key={index}><BookboxColumnSmall {...item} /></View>
-                            }
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 热门分类 */}
-            {indexConfig['hot_category'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexHotCategory?.showRightButton} title={indexStore?.indexHotCategory?.name || "热门分类"} fitTitle="全部分类" imgUrl={require('../../icon/right.png')} fitOnBack={() => { Taro.switchTab({ url: '/pages/classify/index' }) }} />
-                <BookHotTabs hotValue={indexStore?.indexHotCategory?.bookCategoryList || []} onBack={(value) => {
-                    getHotBooks(value)
-                }} />
-                <View className='w row4'>
-                    {
-                        bookStore?.bookList?.records?.map((item, index) => {
-                            return <View key={index}><BookboxColumnSmall {...item} /></View>
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 重磅新书 new_books*/}
-            {indexConfig['new_books'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexNewBooks?.showRightButton} title={indexStore?.indexNewBooks?.name || "重磅新书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
-                    Taro.navigateTo({ url: `/pages/indexMore/index?title=重磅新书&dataName=indexNewBooks` })
-                }} />
-                <View className='w row'>
-                    {
-                        indexStore?.indexNewBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
-                            if (index < 3) {
-                                return <View key={index}><BookboxColumnBig {...item} /></View>
-                            }
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 热门推荐 hot_rec*/}
-            {indexConfig['hot_rec'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexHotRec?.showRightButton} title={indexStore?.indexHotRec?.name || "热门推荐"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
-                    Taro.navigateTo({ url: `/pages/indexMore/index?title=热门推荐&dataName=indexHotRec` })
-                }} />
-                <View className='w row'>
-                    {
-                        indexStore?.indexHotRec?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
-                            if (index < 3) {
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 重磅新书 new_books*/}
+                {indexConfig['new_books'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexNewBooks?.showRightButton} title={indexStore?.indexNewBooks?.name || "重磅新书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+                        Taro.navigateTo({ url: `/pages/indexMore/index?title=重磅新书&dataName=indexNewBooks` })
+                    }} />
+                    <View className='w row'>
+                        {
+                            indexStore?.indexNewBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
+                                if (index < 3) {
+                                    return <View key={index}><BookboxColumnBig {...item} /></View>
+                                }
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 热门推荐 hot_rec*/}
+                {indexConfig['hot_rec'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexHotRec?.showRightButton} title={indexStore?.indexHotRec?.name || "热门推荐"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+                        Taro.navigateTo({ url: `/pages/indexMore/index?title=热门推荐&dataName=indexHotRec` })
+                    }} />
+                    <View className='w row'>
+                        {
+                            indexStore?.indexHotRec?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
+                                if (index < 3) {
+                                    return <View key={index}><BookboxRowMiddle {...item} /></View>
+                                }
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 口碑佳作 best_reviews*/}
+                {indexConfig['best_reviews'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexBestReviews?.showRightButton} title={indexStore?.indexBestReviews?.name || "口碑佳作"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+                        Taro.navigateTo({ url: `/pages/indexMore/index?title=口碑佳作&dataName=indexBestReviews` })
+                    }} />
+                    <View className='w row'>
+                        {
+                            indexStore?.indexBestReviews?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
+                                if (index < 4) {
+                                    return <View key={index}><BookboxColumnSmall {...item} /></View>
+                                }
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 经典热书 classic_books*/}
+                {indexConfig['classic_books'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexClassicBooks?.showRightButton} title={indexStore?.indexClassicBooks?.name || "经典热书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+                        Taro.navigateTo({ url: `/pages/indexMore/index?title=经典热书&dataName=indexClassicBooks` })
+                    }} />
+                    <View className='w row'>
+                        {
+                            indexStore?.indexClassicBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
+                                if (index < 8) {
+                                    return <View key={index}><BookboxColumnSmall {...item} /></View>
+                                }
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 必看好书 best_books*/}
+                {indexConfig['best_books'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexBestBooks?.showRightButton} title={indexStore?.indexBestBooks?.name || "必看好书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
+                        Taro.navigateTo({ url: `/pages/indexMore/index?title=必看好书&dataName=indexBestBooks` })
+                    }} />
+                    <View className='w row'>
+                        {
+                            indexStore?.indexBestBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
+                                if (index < 3) {
+                                    return <View key={index}><BookboxRowMiddle {...item} /></View>
+                                }
+                            })
+                        }
+                    </View>
+                </View>}
+                {/* 猜你喜欢 guess_like*/}
+                {indexConfig['guess_like'] && <View style={{ order: indexConfig['banners'].eq }}>
+                    <BookHead showBtn={indexStore?.indexGuessLike?.showRightButton} title={indexStore?.indexGuessLike?.name || "猜你喜欢"} />
+                    <View className='w row'>
+                        {
+                            indexStore?.indexGuessLike?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.records?.map((item, index) => {
                                 return <View key={index}><BookboxRowMiddle {...item} /></View>
-                            }
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 口碑佳作 best_reviews*/}
-            {indexConfig['best_reviews'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexBestReviews?.showRightButton} title={indexStore?.indexBestReviews?.name || "口碑佳作"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
-                    Taro.navigateTo({ url: `/pages/indexMore/index?title=口碑佳作&dataName=indexBestReviews` })
-                }} />
-                <View className='w row'>
-                    {
-                        indexStore?.indexBestReviews?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
-                            if (index < 4) {
-                                return <View key={index}><BookboxColumnSmall {...item} /></View>
-                            }
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 经典热书 classic_books*/}
-            {indexConfig['classic_books'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexClassicBooks?.showRightButton} title={indexStore?.indexClassicBooks?.name || "经典热书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
-                    Taro.navigateTo({ url: `/pages/indexMore/index?title=经典热书&dataName=indexClassicBooks` })
-                }} />
-                <View className='w row'>
-                    {
-                        indexStore?.indexClassicBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
-                            if (index < 8) {
-                                return <View key={index}><BookboxColumnSmall {...item} /></View>
-                            }
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 必看好书 best_books*/}
-            {indexConfig['best_books'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexBestBooks?.showRightButton} title={indexStore?.indexBestBooks?.name || "必看好书"} fitTitle="更多" imgUrl={require('../../icon/right.png')} fitOnBack={() => {
-                    Taro.navigateTo({ url: `/pages/indexMore/index?title=必看好书&dataName=indexBestBooks` })
-                }} />
-                <View className='w row'>
-                    {
-                        indexStore?.indexBestBooks?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.map((item, index) => {
-                            if (index < 3) {
-                                return <View key={index}><BookboxRowMiddle {...item} /></View>
-                            }
-                        })
-                    }
-                </View>
-            </View>}
-            {/* 猜你喜欢 guess_like*/}
-            {indexConfig['guess_like'] && <View style={{ order: indexConfig['banners'].eq }}>
-                <BookHead showBtn={indexStore?.indexGuessLike?.showRightButton} title={indexStore?.indexGuessLike?.name || "猜你喜欢"} />
-                <View className='w row'>
-                    {
-                        indexStore?.indexGuessLike?.[app?.appInfo?.appCategory === 1 ? "longBookInfoAppVOS" : "shortBookInfoAppVOS"]?.records?.map((item, index) => {
-                            return <View key={index}><BookboxRowMiddle {...item} /></View>
-                        })
-                    }
-                </View>
-            </View>}
-        </View>
+                            })
+                        }
+                    </View>
+                </View>}
+            </View>
+        </TopNavBar1>
+
     </ScrollViewHoc>
 };
-export default TopNavBar(inject('store')(observer(Index)), {
-    tab: true,
-    tabVal: [{ value: 0, text: "男生" }, { value: 1, text: "女生" }],
-    backgroundColor: '#fff',
-    color: "#333",
-    search: true
-});
+export default inject('store')(observer(Index))