feats

src/pages/index/index.jsx

-import React, { useState } from 'react'
+import React, { Suspense, useState, lazy } 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'
 
+const Recommend = lazy(() => import('./tabs/Recommend'))
+const Guide = lazy(() => import('./tabs/Guide'))
+const Strategy = lazy(() => import('./tabs/Strategy'))
+const Mine = lazy(() => import('./tabs/Mine'))
+
 export default (props) => {
   const [currentTab, setCurrentTab] = useState(0)
 
         <CustomNav logo={logo} title='首页' />
       </view>
       <view className='index-container'>
+        <Suspense fallback='loading...'>
+          {currentTab === 0 && <Recommend />}
+          {currentTab === 1 && <Guide />}
+          {currentTab === 2 && <Strategy />}
+          {currentTab === 3 && <Mine />}
+        </Suspense>
       </view>
       <view className='index-tabbar'>
         <mp-tabbar extClass='custom-tabbar' current={currentTab} list={tabList} onChange={handleTabChange}></mp-tabbar>

src/pages/index/index.less

 }
 
 .custom-tabbar {
+  background: #FFFFFF;
+  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
+
   .weui-tabbar__label {
     color: #C0C8D3;
   }

src/pages/index/tabs/Guide.jsx

+import React from 'react'
+
+export default (props) => {
+  return (
+    <view>入住指引</view>
+  )
+}

src/pages/index/tabs/Mine.jsx

+import React from 'react'
+
+export default (props) => {
+  return (
+    <view>个人中心</view>
+  )
+}

src/pages/index/tabs/Recommend.jsx

+import React from 'react'
+
+export default (props) => {
+  return (
+    <view>房东推荐</view>
+  )
+}

src/pages/index/tabs/Strategy.jsx

+import React from 'react'
+
+export default (props) => {
+  return (
+    <view>定制攻略</view>
+  )
+}