feats

config/index.js

@@ -21,6 +21,7 @@ const config = {
     }
   },
   alias: {
+    '@/assets': path.resolve(__dirname, '..', 'src/assets'),
     '@/components': path.resolve(__dirname, '..', 'src/components'),
     '@/layouts': path.resolve(__dirname, '..', 'src/layouts'),
   },

src/components/CustomNav/index.jsx

@@ -0,0 +1,87 @@
+
+import { useState, useEffect, useMemo } from 'react'
+import Taro from '@tarojs/taro'
+import gobackBlack from '@/assets/icons/comm/goback.png'
+import gobackWhite from '@/assets/icons/comm/goback_white.png'
+import './style.less'
+
+export default (props) => {
+  const { bgImg, logo, title = '首页', home } = props
+
+  // 菜单胶囊
+  const menuBound = useMemo(() => Taro.getMenuButtonBoundingClientRect(), [])
+  // 整体顶部导航
+  const navStyle = useMemo(() => {
+    return {
+      height: `${menuBound.bottom}px`,
+      backgroundImage: bgImg ? `url(${bgImg})` : 'none',
+    }
+  }, [menuBound.bottom, bgImg])
+  // 导航栏
+  const navBarStyle = useMemo(() => {
+    return {
+      top: `${menuBound.top}px`,
+      height: `${menuBound.height}px`
+    }
+  }, [menuBound.top, menuBound.height])
+  // 导航栏按钮
+  const actionStyle = useMemo(() => {
+    return {
+      width: `${menuBound.width + 8}px`,
+      paddingLeft: '8px',
+      lineHeight: `${menuBound.height}px`,
+      height: `${menuBound.height}px`,
+    }
+  }, [menuBound.width, menuBound.height])
+  // 导航栏标题
+  const contentStyle = useMemo(() => {
+    const screenWidth = menuBound.right + 8;
+    return {
+      width: `${screenWidth - menuBound.width * 2 - 16}px`,
+      color: bgImg ? '#fff' : '#333',
+      lineHeight: `${menuBound.height}px`,
+      height: `${menuBound.height}px`,
+      paddingLeft: '8px',
+      paddingRight: '8px',
+    }
+  }, [menuBound.width, menuBound.height, menuBound.right, bgImg])
+  // logo
+  const logoStyle = useMemo(() => {
+    return {
+      width: `${menuBound.height}px`,
+      height: `${menuBound.height}px`,
+    }
+  }, [menuBound.height])
+
+  const handleAction = () => {
+    if (home || logo) return;
+
+    if (Taro.getCurrentPages().length > 1) {
+      Taro.navigateBack({ delta: 1 })
+    }
+  }
+
+  return (
+    <view className='custom-nav' style={navStyle}>
+      <view className='custom-nav-bar' style={navBarStyle}>
+        <view className='custom-nav-bar-action' style={actionStyle}>
+          {
+            !!logo && <image src={logo} className='custom-nav-bar-logo' mode='aspectFit' style={logoStyle} />
+          }
+          {
+            !home && (
+              <view>
+                <view className='custom-nav-bar-action-part' onClick={handleAction}>
+                  {/* <image src={bgImg ? gobackWhite : gobackBlack} className='custom-nav-bar-action-goback' mode='aspectFit' /> */}
+                </view>
+                <view className='custom-nav-bar-action-part'>
+                </view>                
+              </view>
+            )
+          }
+        </view>
+        <view className='custom-nav-bar-content' style={contentStyle}>{title}</view>
+      </view>
+    </view>
+  )
+}

src/components/CustomNav/style.less

@@ -0,0 +1,51 @@
+.custom-nav {
+	display: block;
+	position: relative;
+
+  &-bar {    
+    position: absolute;
+    width: 100%;
+    z-index: 1024;
+    left: 0;
+
+    &-action {
+      display: inline-block;
+      box-sizing: border-box;
+
+      image {
+        display: inline-block;
+        border: 0;
+      }
+
+      &-part {
+        width: 50%;
+        display: inline-block;
+        text-align: center;
+        height: 100%;
+
+        image {
+          &:first-child {
+            width: 16px;
+            height: 28px;
+          }
+        }
+      }
+    }
+
+    &-logo {
+      border-radius: 50%;
+    }
+
+    &-content {
+      display: inline-block;
+      text-align: center;
+      font-size: 32px;
+      cursor: none;
+      pointer-events: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+  }
+}

src/pages/index/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationBarTitleText: '首页',
+  navigationStyle: 'custom',
 }

src/pages/index/index.jsx

@@ -1,24 +1,15 @@
-import { Component } from 'react'
-import { View, Text } from '@tarojs/components'
-import './index.less'
-
-export default class Index extends Component {
-
-  componentWillMount () { }
 
-  componentDidMount () { }
-
-  componentWillUnmount () { }
+import { View, Text } from '@tarojs/components'
+import CustomNav from '@/components/CustomNav'
 
-  componentDidShow () { }
 
-  componentDidHide () { }
+import './index.less'
 
-  render () {
-    return (
-      <View className='index'>
-        <Text>Hello world!</Text>
-      </View>
-    )
-  }
+export default (props) => {
+  return (
+    <View className='index'>
+      <CustomNav title='首页' />
+      <Text>Hello world!</Text>
+    </View>
+  )
 }

src/pages/test/index.jsx

@@ -1,7 +1,27 @@
 import Layout from '@/layouts'
-
+import Taro, { useRouter } from '@tarojs/taro'
+import { useEffect } from 'react'
 export default (props) => {
+  const router = useRouter()
+
+  console.log('----------->', router)
+
+  // useEffect(() => {
+  //   const t = setTimeout(() => {
+  //     try {
+  //       Taro.navigateTo({ url: '/pages/test/index?id=1' })
+  //     } catch (e) {
+  //       console.log('-----eeee------>', e)
+  //     }
+  //     clearTimeout(t)
+  //     console.log('-----setTimeout------>', t)
+  //     console.log(Taro.getCurrentPages())
+  //   }, 2000)
+
+  // }, [])
+
   return (
-    <Layout>123</Layout>
+    <Layout>
+    </Layout>
   )
 }

src/router/core.js

@@ -0,0 +1,10 @@
+
+export default function createRouter (routes, options) {
+  let current;
+  let prev;
+  let next;
+
+  function transitionTo(location) {
+
+  }
+}