update

src/_moment/pages/message.config.ts

@@ -0,0 +1,11 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#f5f5f5",
+    "backgroundColor": "#ffffff",
+    // "navigationStyle": "custom",
+    "disableScroll": true
+})

src/_moment/pages/message.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect } from 'react'
-import { View, MovableArea, MovableView, Image, Text } from '@tarojs/components'
+import { View, MovableArea, MovableView, Image, Text, ScrollView } from '@tarojs/components'
 import { createSelectorQuery, chooseImage, showToast } from '@tarojs/taro'
 import './message.scss'
 import { followUser, getMessages } from '@/services/friend'
@@ -9,31 +9,68 @@ import dayjs from 'dayjs'
 import { rpxToPx } from '@/utils/tools'
 import NewButton, { NewButtonType } from '@/_health/base/new_button'
 import Taro from '@tarojs/taro'
+import NoRecord from '@/_health/components/no_record'
 
 
 export default function Message() {
   const [list, setList] = useState<any>([])
+  const [loaded, setLoaded] = useState(false)
+  const [page, setPage] = useState(1)
+  const [isPulling, setIsPulling] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [total, setTotal] = useState(-1)
   useEffect(() => {
     Taro.setNavigationBarTitle({
       title: '消息'
     })
-    getMessageData()
+    setPage(1)
+    getMessageData(1)
 
     Taro.eventCenter.on('followUser', listenFollowUser)
     Taro.eventCenter.on('unfollowUser', listenUnfollowUser)
   }, [])
 
   function listenFollowUser(e) {
-    getMessageData()
+    getMessageData(1)
   }
 
   function listenUnfollowUser(e) {
-    getMessageData()
+    getMessageData(1)
   }
 
-  function getMessageData() {
-    getMessages({ page: 1, limit: 20 }).then(res => {
-      setList((res as any).data)
+  function onRefresh() {
+    setIsPulling(true)
+    getMessageData(1)
+  }
+
+  function more() {
+    if (isLoading) return
+    if (total == list.length) return
+    var index = page + 1
+    getMessageData(index)
+  }
+
+  function onScroll() {
+
+  }
+
+  function getMessageData(index) {
+    setPage(index)
+    setIsLoading(true)
+    getMessages({ page: index, limit: 20 }).then(res => {
+      if (index == 1) {
+        setList((res as any).data)
+        setTotal((res as any).total)
+      }
+      else {
+        setList([...list, ...(res as any).data])
+      }
+      setLoaded(true)
+      setIsPulling(false)
+      setIsLoading(false)
+    }).catch(e => {
+      setIsPulling(false)
+      setIsLoading(false)
     })
   }
 
@@ -46,6 +83,7 @@ export default function Message() {
       item.relation = 'FRIEND'
       setList(JSON.parse(JSON.stringify(list)))
       Taro.eventCenter.trigger('followUser', item.user.id)
+
     })
   }
 
@@ -70,18 +108,36 @@ export default function Message() {
           title='Follow back'
           onClick={() => tapFollow(item)}
         /> :
-        item.relation == 'FRIEND' ?<Text className="h30 g02">Friend</Text>:
-        item.relation == 'FOLLOWING' ? <Text className="h30 g02">Following</Text>:null
+          item.relation == 'FRIEND' ? <Text className="h30 g02">Friend</Text> :
+            item.relation == 'FOLLOWING' ? <Text className="h30 g02">Following</Text> : null
       }
     </View>
   }
 
-  return <View style={{ minHeight: '100vh', backgroundColor: '#fff' }}>
-    {
-      list.map((item, index) => {
-        return messageItem(item, index)
-      })
-    }
-  </View>
+  if (loaded && list.length == 0)
+    return <NoRecord />
+
+  return <ScrollView style='height:100vh'
+    enableBackToTop
+    scrollY={true}
+    refresherEnabled={true}
+    upperThreshold={70}
+    lowerThreshold={140}
+    refresherBackground={MainColorType.g05}
+    onRefresherRefresh={onRefresh}
+    refresherTriggered={isPulling}
+    onScroll={onScroll}
+    onScrollToUpper={() => {
+
+    }}
+    onScrollToLower={more}
+  ><View>
+      {
+        list.map((item, index) => {
+          return messageItem(item, index)
+        })
+      }
+    </View>
+  </ScrollView>
 }
 

src/_moment/pages/relation.config.ts

@@ -0,0 +1,11 @@
+export default definePageConfig({
+    usingComponents: {
+        // 'ec-canvas': '../../lib/ec-canvas/ec-canvas',
+        // 'demo':'../../components/demo'
+    },
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#f5f5f5",
+    "backgroundColor": "#ffffff",
+    // "navigationStyle": "custom",
+    "disableScroll": true
+})

src/_moment/pages/relation.tsx

@@ -1,6 +1,6 @@
 import { MainColorType } from "@/context/themes/color";
 import { followUser, getMyFollowers, getMyFollowings, getMyFriends } from "@/services/friend";
-import { View, Image, Text } from "@tarojs/components";
+import { View, Image, Text, ScrollView } from "@tarojs/components";
 import { useEffect, useState } from "react";
 import './relation.scss'
 import NewButton, { NewButtonType } from "@/_health/base/new_button";
@@ -8,6 +8,7 @@ import { rpxToPx } from "@/utils/tools";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { IconArrow } from "@/components/basic/Icons";
 import Taro from "@tarojs/taro";
+import NoRecord from "@/_health/components/no_record";
 
 export default function Relation() {
     const [count, setCount] = useState(0)
@@ -18,59 +19,149 @@ export default function Relation() {
     const [followings, setFollowings] = useState<any>([])
     const [index, setIndex] = useState(0)
 
+    const [list, setList] = useState<any>([])
+    const [loaded, setLoaded] = useState(false)
+    const [page, setPage] = useState(1)
+    const [isPulling, setIsPulling] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const [total, setTotal] = useState(-1)
+
     useEffect(() => {
-        getRelation()
-        getFollowers()
-        getFollowings()
+        // getRelation()
+        // getFollowers()
+        // getFollowings()
+
+        Taro.eventCenter.on('followUser', listenFollowUser)
+        Taro.eventCenter.on('unfollowUser', listenUnfollowUser)
 
-        Taro.eventCenter.on('followUser',listenFollowUser)
-        Taro.eventCenter.on('unfollowUser',listenUnfollowUser)
+        setPage(1)
+        getList(1)
 
-        return ()=>{
+        return () => {
             // Taro.eventCenter.off('followUser')
             // Taro.eventCenter.off('unfollowUser')
         }
     }, [])
 
-    function listenFollowUser(e){
-        console.log('follow user',e)
-        getRelation()
-        getFollowers()
-        getFollowings()
+    useEffect(() => {
+        setPage(1)
+        getList(1)
+    }, [index])
+
+    function getList(i) {
+        setPage(i)
+        if (index == 0) {
+            getRelation(i)
+        }
+        else if (index == 1) {
+            getFollowings(i)
+        }
+        else {
+            getFollowers(i)
+        }
+    }
+
+    function onRefresh() {
+        setIsPulling(true)
+        setPage(1)
+        getList(1)
     }
 
-    function listenUnfollowUser(e){
-        console.log('unfollow user',e)
-        getRelation()
-        getFollowers()
-        getFollowings()
+    function more() {
+        if (isLoading) return
+        if (total == list.length) return
+        var i = page + 1
+        getList(i)
     }
 
-    function getRelation() {
+
+
+    function listenFollowUser(e) {
+        console.log('follow user', e)
+        // getRelation()
+        // getFollowers()
+        // getFollowings()
+        getList(1)
+    }
+
+    function listenUnfollowUser(e) {
+        console.log('unfollow user', e)
+        // getRelation()
+        // getFollowers()
+        // getFollowings()
+        getList(1)
+    }
+
+    function getRelation(i) {
+        setPage(i)
+        setIsLoading(true)
         getMyFriends({
-            page: 1,
+            page: i,
             limit: 20
         }).then(res => {
+            setIsLoading(false)
+            setLoaded(true)
+            setIsPulling(false)
             setCount((res as any).total)
-            setFriends((res as any).data)
+            // setFriends((res as any).data)
+            if (i == 1) {
+                setList((res as any).data)
+            }
+            else {
+                setList([...list, ...(res as any).data])
+            }
+        }).catch(e => {
+            setIsLoading(false)
+            setLoaded(true)
+            setIsPulling(false)
         })
     }
-    function getFollowers() {
+    function getFollowers(i) {
+        setPage(i)
+        setIsLoading(true)
         getMyFollowers({
-            page: 1,
+            page: i,
             limit: 20
         }).then(res => {
-            setCount2((res as any).total)
-            setFollowers((res as any).data)
+            setIsLoading(false)
+            setLoaded(true)
+            setIsPulling(false)
+            setCount((res as any).total)
+            // setFollowers((res as any).data)
+            if (i == 1) {
+                setList((res as any).data)
+            }
+            else {
+                setList([...list, ...(res as any).data])
+            }
+        }).catch(e => {
+            setIsLoading(false)
+            setLoaded(true)
+            setIsPulling(false)
         })
     }
-    function getFollowings() {
+    function getFollowings(i) {
+        setPage(i)
+        setIsLoading(true)
         getMyFollowings({
-            page: 1,
+            page: i,
             limit: 20
         }).then(res => {
-            setCount3((res as any).total)
-            setFollowings((res as any).data)
+            setIsLoading(false)
+            setLoaded(true)
+            setIsPulling(false)
+            setCount((res as any).total)
+            // setFollowings((res as any).data)
+            if (i == 1) {
+                setList((res as any).data)
+            }
+            else {
+                setList([...list, ...(res as any).data])
+            }
+        }).catch(e => {
+            setIsLoading(false)
+            setLoaded(true)
+            setIsPulling(false)
         })
     }
 
@@ -107,6 +198,19 @@ export default function Relation() {
         </View>
     }
 
+    function userList() {
+        return <View>
+            {/* <View>我的粉丝{count3}</View> */}
+            {
+                list.map((item, index) => {
+                    return followItem(item, index)
+                })
+            }
+        </View>
+    }
+
+
+
     function tapFollow(item) {
         var params: any = {
             follow_origin: 'WECHAT_PRIVATE_CHAT',
@@ -121,7 +225,7 @@ export default function Relation() {
 
     function followItem(item, index) {
         return <View key={index} className="relation_item" onClick={() => {
-            jumpPage('./home?uid='+item.id)
+            jumpPage('./home?uid=' + item.id)
         }}>
             <Image src={item.avatar} className="relation_avatar" />
             <Text className="h34" style={{ color: MainColorType.link, flex: 1 }}>{item.nickname}</Text>
@@ -148,14 +252,38 @@ export default function Relation() {
         </View>
     }
 
-    return <View style={{ backgroundColor: '#fff', minHeight: '100vh' }}>
-        <View style={{ display: 'flex', flexDirection: 'row', height: 50 }}>
-            <View style={{ flex: 1, color: index == 0 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(0) }}>搭子</View>
-            <View style={{ flex: 1, color: index == 1 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(1) }}>关注</View>
-            <View style={{ flex: 1, color: index == 2 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(2) }}>粉丝</View>
-        </View>
+    function onScroll() {
 
-        {
+    }
+
+    if (loaded && list.length == 0)
+        return <NoRecord />
+
+    return <ScrollView style='height:100vh'
+        enableBackToTop
+        scrollY={true}
+        refresherEnabled={true}
+        upperThreshold={70}
+        lowerThreshold={140}
+        refresherBackground={MainColorType.g05}
+        onRefresherRefresh={onRefresh}
+        refresherTriggered={isPulling}
+        onScroll={onScroll}
+        onScrollToUpper={() => {
+
+        }}
+        onScrollToLower={more}
+    ><View >
+            <View style={{ display: 'flex', flexDirection: 'row', height: 50 }}>
+                <View style={{ flex: 1, color: index == 0 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(0) }}>搭子</View>
+                <View style={{ flex: 1, color: index == 1 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(1) }}>关注</View>
+                <View style={{ flex: 1, color: index == 2 ? '#000' : MainColorType.g02, textAlign: 'center' }} onClick={() => { setIndex(2) }}>粉丝</View>
+            </View>
+            {
+                userList()
+            }
+
+            {/* {
             index == 0 && friendsList()
         }
         {
@@ -163,7 +291,8 @@ export default function Relation() {
         }
         {
             index == 2 && followerList()
-        }
-    </View>
+        } */}
+        </View>
+    </ScrollView>
 
 }