update

src/app.config.ts

@@ -10,7 +10,8 @@ const appConfig = defineAppConfig({
     'pages/store/product_list',
     'pages/account/Journal',
     'pages/account/JournalDetail',
-    'pages/discover/discover'
+    'pages/discover/discover',
+    'pages/friend/friend'
   ],
   entryPagePath: 'pages/clock/Clock',
   // subPackages: [
@@ -141,6 +142,10 @@ process.env.TARO_ENV === 'weapp' && (appConfig.tabBar = {
       pagePath: 'pages/discover/discover',
       text: '发现',
     },
+    {
+      pagePath: 'pages/friend/friend',
+      text: '搭子圈',
+    },
     {
       pagePath: 'pages/notification/setting',
       text: '提醒',

src/components/navigation/TabBar.tsx

@@ -1,4 +1,4 @@
-import { View, Text,Image } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
 import './TabBar.scss'
 import Taro from '@tarojs/taro';
 import { useState } from 'react';
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 export default function Component(props: { index: number }) {
     const common = useSelector((state: any) => state.common);
     const [selIndex] = useState(props.index)
-    const {t} = useTranslation()
+    const { t } = useTranslation()
     function switchTab(index: number) {
         switch (index) {
             case 0:
@@ -43,27 +43,31 @@ export default function Component(props: { index: number }) {
                 break;
             case 4:
                 Taro.switchTab({
-                    url: '/pages/food/Food'
+                    url: '/pages/friend/friend'
                 })
                 break;
         }
     }
 
     return <View className='tabbar'>
-        <View style={{position:'absolute',left:0,top:0,width:rpxToPx(750)}}>
-            <View className='border_footer_line'/>
+        <View style={{ position: 'absolute', left: 0, top: 0, width: rpxToPx(750) }}>
+            <View className='border_footer_line' />
         </View>
         <View className={selIndex == 0 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(0)}>
-            <Image className='tabbar-icon' src={selIndex == 0 ?require('@assets/_health/home_sel.png'):require('@assets/_health/home.png')}/>
-            <View className={selIndex==0?'tabbar-item-text-sel':'tabbar-item-text'}>{t('health.today')}</View>
+            <Image className='tabbar-icon' src={selIndex == 0 ? require('@assets/_health/home_sel.png') : require('@assets/_health/home.png')} />
+            <View className={selIndex == 0 ? 'tabbar-item-text-sel' : 'tabbar-item-text'}>{t('health.today')}</View>
+        </View>
+        <View className={selIndex == 4 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(4)}>
+            <Image className='tabbar-icon' src={selIndex == 4 ? require('@assets/_health/user_sel.png') : require('@assets/_health/user.png')} />
+            <View className={selIndex == 4 ? 'tabbar-item-text-sel' : 'tabbar-item-text'}>{t('health.friends')}</View>
         </View>
         <View className={selIndex == 1 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(1)}>
-            <Image className='tabbar-icon' src={selIndex == 1 ?require('@assets/_health/compass_sel.png'):require('@assets/_health/compass.png')}/>
-            <View className={selIndex==1?'tabbar-item-text-sel':'tabbar-item-text'}>{t('health.discover')}</View>
+            <Image className='tabbar-icon' src={selIndex == 1 ? require('@assets/_health/compass_sel.png') : require('@assets/_health/compass.png')} />
+            <View className={selIndex == 1 ? 'tabbar-item-text-sel' : 'tabbar-item-text'}>{t('health.discover')}</View>
         </View>
         <View className={selIndex == 3 ? 'tabbar-item tabbar-item-sel' : 'tabbar-item'} onClick={() => switchTab(3)}>
-            <Image className='tabbar-icon' src={selIndex == 3 ?require('@assets/_health/user_sel.png'):require('@assets/_health/user.png')}/>
-            <View className={selIndex==3?'tabbar-item-text-sel':'tabbar-item-text'}>{t('health.me')}</View>
+            <Image className='tabbar-icon' src={selIndex == 3 ? require('@assets/_health/user_sel.png') : require('@assets/_health/user.png')} />
+            <View className={selIndex == 3 ? 'tabbar-item-text-sel' : 'tabbar-item-text'}>{t('health.me')}</View>
         </View>
     </View>
 }

src/context/locales/en.js

@@ -1221,5 +1221,7 @@ export default {
         reminder_alert_title: 'Activate reminders in the official account',
         reminder_cancel: 'Later',
         reminder_confirm: 'Activate',
+
+        friends:'Friends',
     }
 }

src/context/locales/zh.js

@@ -1222,5 +1222,7 @@ export default {
         reminder_alert_title:'在公众号中，激活提醒功能',
         reminder_cancel:'稍后',
         reminder_confirm:'前往激活',
+
+        friends:'搭子圈',
     }
 }

src/pages/friend/friend.tsx

@@ -0,0 +1,39 @@
+
+
+import TabBar from "@/components/navigation/TabBar";
+import { rpxToPx } from "@/utils/tools";
+import { View, Text, Image,ScrollView } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { useEffect } from "react";
+export default function Friend() {
+    const observerObjBottom = Taro.createIntersectionObserver().relativeToViewport({bottom:100})
+    useEffect(()=>{
+        observerObjBottom.observe('#a',(res)=>{
+            console.log('a')
+        })
+        observerObjBottom.observe('#b',(res)=>{
+            console.log('b')
+        })
+        observerObjBottom.observe('#c',(res)=>{
+            console.log('c')
+        })
+        observerObjBottom.observe('#d',(res)=>{
+            console.log('d')
+        })
+        observerObjBottom.observe('#e',(res)=>{
+            console.log('e')
+        })
+    },[])
+    return <View>
+        <ScrollView scrollY style={{height:'100vh'}}>
+            <View style={{height:'100vh',backgroundColor:'pink',width:rpxToPx(750)}} id="a"></View>
+            <View style={{height:'100vh',backgroundColor:'blue',width:rpxToPx(750)}} id="b"></View>
+            <View style={{height:'100vh',backgroundColor:'yellow',width:rpxToPx(750)}} id="c"></View>
+            <View style={{height:'100vh',backgroundColor:'green',width:rpxToPx(750)}} id="d"></View>
+            <View style={{height:'100vh',backgroundColor:'red',width:rpxToPx(750)}} id="e"></View>
+        </ScrollView>
+        {
+            process.env.TARO_ENV == 'weapp' && <TabBar index={4} />
+        }
+    </View>
+}