feats

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "miniapp",
   "description": "十公里",
-  "appid": "touristappid",
+  "appid": "wxe44244d1a5ea3364",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/app.config.js

@@ -1,7 +1,6 @@
 export default {
   pages: [
-    'pages/index/index',
-    'pages/test/index'
+    'pages/index/index'
   ],
   window: {
     backgroundTextStyle: 'light',

src/components/CustomNav/index.jsx

@@ -1,8 +1,11 @@
 
 import { useState, useEffect, useMemo } from 'react'
 import Taro from '@tarojs/taro'
+import homeBlack from '@/assets/icons/comm/home.png'
+import homeWhite from '@/assets/icons/comm/home_white.png'
 import gobackBlack from '@/assets/icons/comm/goback.png'
 import gobackWhite from '@/assets/icons/comm/goback_white.png'
+
 import './style.less'
 
 export default (props) => {
@@ -69,13 +72,14 @@ export default (props) => {
             !!logo && <image src={logo} className='custom-nav-bar-logo' mode='aspectFit' style={logoStyle} />
           }
           {
-            !home && (
+            !logo && !home && (
               <view className='custom-nav-bar-action-btns'>
                 <view className='custom-nav-bar-action-part' onClick={handleAction}>
-                  <image src={bgImg ? gobackWhite : gobackBlack} className='custom-nav-bar-action-goback' mode='aspectFit' />
+                  <image src={bgImg ? gobackWhite : gobackBlack} mode='aspectFit' />
                 </view>
                 <view className='custom-nav-bar-action-part'>
-                </view>                
+                  <image src={bgImg ? homeWhite : homeBlack} mode='aspectFit' />
+                </view>
               </view>
             )
           }

src/components/CustomNav/style.less

@@ -2,14 +2,15 @@
 	display: block;
 	position: relative;
 
-  &-bar {    
-    position: absolute;
+  &-bar {
+    display: flex;
+    position: fixed;
     width: 100%;
     z-index: 1024;
     left: 0;
 
     &-action {
-      display: inline-block;
+      flex: none;
       box-sizing: border-box;
 
       image {
@@ -28,6 +29,7 @@
           text-align: center;
 
           image {
+            width: 100%;
             height: 30px;
           }
         }
@@ -35,11 +37,13 @@
     }
 
     &-logo {
+      display: block !important;
       border-radius: 50%;
+      margin: 0 auto;
     }
 
     &-content {
-      display: inline-block;
+      flex: none;
       text-align: center;
       font-size: 32px;
       cursor: none;

src/pages/index/index.config.js

@@ -1,4 +1,8 @@
 export default {
   navigationBarTitleText: '首页',
   navigationStyle: 'custom',
+  styleIsolation: 'shared',
+  usingComponents: {
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
+  }
 }

src/pages/index/index.jsx

@@ -1,15 +1,28 @@
-
+import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
 import CustomNav from '@/components/CustomNav'
-
-
+import logo from '@/assets/icons/comm/logo_small.png'
+import tabList from './tabbar'
 import './index.less'
 
 export default (props) => {
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const handleTabChange = (e) => {
+    const { index } = e.detail
+    setCurrentTab(index)
+  }
+
   return (
-    <View className='index'>
-      <CustomNav title='首页' />
-      <Text>Hello world!</Text>
-    </View>
+    <view className='page-index'>
+      <view className='index-navbar'>
+        <CustomNav logo={logo} title='首页' />
+      </view>
+      <view className='index-container'>
+      </view>
+      <view className='index-tabbar'>
+        <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>
+      </view>
+    </view>
   )
 }

src/pages/index/index.less

@@ -0,0 +1,32 @@
+.page-index {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  .index-navbar {
+    flex: none;
+  }
+
+  .index-tabber {
+    flex: none;
+  }
+
+  .index-container {
+    flex: auto;
+  }
+}
+
+.custom-tabbar {
+  .weui-tabbar__label {
+    color: #C0C8D3;
+  }
+
+  .weui-bar__item_on {
+    .weui-tabbar__label {
+      color: #202020;
+    }
+  }
+}

src/pages/index/tabbar.js

@@ -0,0 +1,25 @@
+
+const tabbar = [
+  {
+    text: '房东推荐',
+    iconPath: require('@/assets/icons/tabbar/recommend.png'),
+    selectedIconPath: require('@/assets/icons/tabbar/recommend_active.png'),
+  },
+  {
+    text: '入住指引',
+    iconPath: require('@/assets/icons/tabbar/guide.png'),
+    selectedIconPath: require('@/assets/icons/tabbar/guide_active.png'),
+  },
+  {
+    text: '定制攻略',
+    iconPath: require('@/assets/icons/tabbar/strategy.png'),
+    selectedIconPath: require('@/assets/icons/tabbar/strategy_active.png'),
+  },
+  {
+    text: '个人中心',
+    iconPath: require('@/assets/icons/tabbar/mine.png'),
+    selectedIconPath: require('@/assets/icons/tabbar/mine_active.png'),
+  },
+]
+
+export default tabbar

src/pages/test/index.config.js

@@ -1,6 +0,0 @@
-export default {
-  navigationBarTitleText: '测试页面',
-  usingComponents: {
-    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
-  }
-}

src/pages/test/index.jsx

@@ -1,27 +0,0 @@
-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>
-    </Layout>
-  )
-}

src/router/core.js

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