自定义tabs

src/app.config.js

@@ -9,8 +9,7 @@ export default {
     'pages/login/login',
     'pages/shopKeeper/shopKeeper',
     'pages/spread/spreadMoney',
-    'pages/landlord/income/income',
-    'pages/landlord/houseManage/houseManage',
+    'pages/landlord/AllLandlord/AllLandlord',
     'pages/PayOrder/index',
     'pages/MineUserAll/ContactMe/index',
     'pages/MineUserAll/HomeLogo/index',

src/components/CustTabBar/index.jsx

@@ -0,0 +1,39 @@
+
+import React from 'react'
+import './style.less'
+
+export default (props) => {
+  const { extClass = '', current, onChange, children } = props
+
+  const handleTabChange = (e, index) => {
+    if (e) {
+      e.detail = {
+        ...e.detail || {},
+        index,
+      }
+      // Object.assign(e.detail, { index })
+    }
+
+    if (onChange) {
+      onChange(e)
+    }
+  }
+
+  const className = `weui-tabbar cust-tabbar ${extClass}`
+
+  return (
+    <view className={className}>
+      {
+        React.Children.toArray(children).map((child, index) => {
+          const itemClass = `weui-tabbar__item cust-tabbar-item`
+
+          return (
+            <view className={itemClass} onClick={(e) => handleTabChange(e, index)}>
+              {child}
+            </view>
+          )
+        })
+      }
+    </view>
+  )
+}

src/components/CustTabBar/style.less

@@ -0,0 +1,6 @@
+.cust-tabbar {
+  &-item {
+    font-size: 1em;
+    padding: 0;
+  }
+}

src/pages/landlord/houseManage/houseManage.jsx → src/components/Landlord/HouseManage/houseManage.jsx

@@ -1,7 +1,5 @@
 import Taro from '@tarojs/taro'
 import CustomNav from '@/components/CustomNav'
-import income from '../../../assets/icons/landlord/我的收入.png'
-import house from '../../../assets/icons/landlord/房源管理按下.png'
 import pImg from '../../../assets/icons/landlord/定位 位置.png'
 import see from '../../../assets/icons/landlord/查看入住人.png'
 import share from '../../../assets/icons/landlord/分享链接.png'
@@ -47,14 +45,6 @@ export default (props) => {
       <view className='addHouse'>
         <image className='addImg' src={addImg} />添加房源
       </view>
-      <view className='bottomTab'>
-          <view className='incometab' onClick={toIncome}>
-            <image className='incomes' src={income} /><text>我的收入</text>
-          </view>
-          <view className='housetab'>
-            <image className='house' src={house} /><text>房源管理</text>
-          </view>
-        </view>
     
       </view>
   )

src/pages/landlord/houseManage/houseManage.less → src/components/Landlord/HouseManage/houseManage.less

@@ -87,32 +87,3 @@
     top: 6px;
   }
 }
-.bottomTab{
-  width: 100%;
-  height: 98px;
-  background: #FFFFFF;
-  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
-  display: inline-block;
-  position: absolute;
-  bottom: 0;
-  line-height: 98px;
-  font-size: 30px;     
-  font-weight: bold;
-  color: #202020;
-  .incometab{
-    display: inline-block;
-    margin-left: 17%;
-    color: #666;
-  }
-  .housetab{
-    margin-right:17%;
-    float: right;
-  }
-  image{
-    width: 31px;
-    height: 31px;
-    position: relative;
-    top: 7px;
-    margin-right: 12px;
-  }
-}

src/pages/landlord/income/income.jsx → src/components/Landlord/Income/income.jsx

@@ -3,8 +3,6 @@ import CustomNav from '@/components/CustomNav'
 import './income.less'
 import eyes from '../../../assets/icons/shopKeeper/小眼睛.png'
 import ceyes from '../../../assets/icons/shopKeeper/小眼睛-闭上.png'
-import income from '../../../assets/icons/landlord/我的收入按下.png'
-import house from '../../../assets/icons/landlord/房源管理.png'
 import sImg from '../../../assets/icons/landlord/我的收入2.png'
 
 
@@ -92,15 +90,7 @@ export default (props) => {
           <view className='botton'>已经到底了~</view>
         </scroll-view>        
       </view>
-      <view className='bottomTab'>
-          <view className='incometab'>
-            <image className='incomes' src={income} /><text>我的收入</text>
-          </view>
-          <view className='housetab' onClick={toHouse}>
-            <image className='house' src={house} /><text>房源管理</text>
-          </view>
-        </view>
-    
+      
       </view>
   )
 }

src/pages/landlord/income/income.less → src/components/Landlord/Income/income.less

@@ -118,32 +118,3 @@
   text-align: center;
   padding:40px 0 100px 0;
 }
-.bottomTab{
-  width: 100%;
-  height: 98px;
-  background: #FFFFFF;
-  box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.08);
-  display: inline-block;
-  position: absolute;
-  bottom: 0;
-  line-height: 98px;
-  font-size: 30px;     
-  font-weight: bold;
-  color: #202020;
-  .incometab{
-    display: inline-block;
-    margin-left: 17%;
-  }
-  .housetab{
-    color: #666;
-    margin-right:17%;
-    float: right;
-  }
-  image{
-    width: 31px;
-    height: 31px;
-    position: relative;
-    top: 7px;
-    margin-right: 12px;
-  }
-}

src/pages/landlord/AllLandlord/AllLandlord.config.js

@@ -0,0 +1,8 @@
+export default {
+  navigationBarTitleText: '十公里',
+  navigationStyle: 'custom',
+  styleIsolation: 'shared',
+  usingComponents: {
+    "mp-tabbar": "weui-miniprogram/tabbar/tabbar"
+  }
+}

src/pages/landlord/AllLandlord/AllLandlord.jsx

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react'
+import { useRouter } from '@tarojs/taro'
+import HouseManage from '@/components/Landlord/HouseManage/houseManage'
+import Income from '@/components/Landlord/Income/income'
+import TabBar from '@/components/CustTabBar'
+import incomeImg from '@/assets/icons/landlord/我的收入.png'
+import onincomeImg from '@/assets/icons/landlord/我的收入按下.png'
+import houseImg from '@/assets/icons/landlord/房源管理.png'
+import onhouseImg from '@/assets/icons/landlord/房源管理按下.png'
+import './AllLandlord.less'
+
+export default (props) => {
+  const { params } = useRouter()
+  const { tab } = params || {}
+
+  const [currentTab, setCurrentTab] = useState(0)
+
+  const handleTabChange = (e) => {
+    const { index } = e.detail
+    setCurrentTab(index)
+  }
+
+  useEffect(() => {
+    if (tab) {
+      setCurrentTab(tab - 0)
+    }
+  }, [tab])
+
+  return (
+    <view className='page-index'>
+      <view className='index-container'>
+        {currentTab === 0 && <Income />}
+        {currentTab === 1 && <HouseManage />}
+      </view>
+      <view className='index-tabbar'>
+        <TabBar extClass='custom-tabbar bottomTab' current={currentTab} onChange={handleTabChange}>
+          <view className={`${currentTab === 0 ? 'incomeTab' : ''}`}>
+            <image className='incomes' src={currentTab === 0 ? onincomeImg : incomeImg} /><text>我的收入</text>
+          </view>
+          <view className={`${currentTab === 1 ? 'houseTab' : ''}`}>
+            <image className='house' src={currentTab === 1 ? onhouseImg : houseImg} /><text>房源管理</text>
+          </view>
+        </TabBar>
+      </view>
+    </view>
+
+  )
+
+}

src/pages/landlord/AllLandlord/AllLandlord.less

@@ -0,0 +1,20 @@
+.bottomTab{
+  height: 98px;
+  line-height: 98px;
+  font-size: 30px;     
+  font-weight: bold;
+  color: #202020;
+  .incomeTab{
+    color: #666;
+  }
+  .houseTab{
+    color: #666;
+  }
+  image{
+    width: 31px;
+    height: 31px;
+    position: relative;
+    top: 7px;
+    margin-right: 12px;
+  }
+}

src/pages/landlord/houseManage/houseManage.config.js

@@ -1,4 +0,0 @@
-export default {
-  navigationBarTitleText: '十公里周边指南',
-  navigationStyle: 'custom',
-}

src/pages/landlord/income/income.config.js

@@ -1,4 +0,0 @@
-export default {
-  navigationBarTitleText: '十公里',
-  navigationStyle: 'custom',
-}