taro3.x: 列表下拉更新简单实现

分页参数：

export interface IPage {
    currentPage: number
    totalCount: number
    totalPage: number
}

export const INIT_PAGE: IPage = {
    currentPage: 1,
    totalCount: 0,
    totalPage: 0
}

export const getTotalPage = (limit: number, totalCount: number) => {
    return Math.ceil(totalCount / limit)
}

评论列表tsx:

import React, { useEffect, useState } from 'react'
import { getCurrentInstance } from '@tarojs/taro'
import { View, Image, Text, ScrollView } from '@tarojs/components'

import api from '@services/api'
import app from '@services/request'
import NavBar from '@components/navbar'
import useNavData from '@hooks/useNavData'
import { formatTimestamp } from '@utils/index'
import { IPage, INIT_PAGE, getTotalPage } from '@utils/page'

import './index.scss'

const HouseComment = () => {
    const PAGE_LIMIT = 10
    const router = getCurrentInstance().router
    const houseId = router?.params.id
    const houseTitle = router?.params.title
    const { contentHeight } = useNavData()
    const [showEmpty, setShowEmpty] = useState<boolean>(false)
    const [page, setPage] = useState<IPage>(INIT_PAGE)
    const [commentList, setCommentList] = useState<any[]>([])

    useEffect(() => {
        fetchHouseComment()
    }, [page.currentPage])

    const fetchHouseComment = () => {
        app.request({
            url: app.areaApiUrl(api.getHouseComment),
            data: {
                page: page.currentPage,
                limit: PAGE_LIMIT,
                fang_house_id: houseId,
            }
        }).then((result: any) => {
            setCommentList([...commentList, ...result.data])
            setPage({
                ...page,
                totalCount: result.pagination.totalCount,
                totalPage: getTotalPage(PAGE_LIMIT, result.pagination.totalCount)
            })
        })
    }

    const handleScrollToLower = () => {
        if (page.totalPage > page.currentPage) {
            setPage({
                ...page,
                currentPage: page.currentPage + 1
            })
        } else {
            setShowEmpty(true)
        }
    }
    return (
        <View className="comment">
            <NavBar title={`${houseTitle}-全部评论`} back={true}></NavBar>
            <View className="comment-header">
                <View className="title view-content">全部评论({page.totalCount})</View>
            </View>
            <View className="comment-content">
                <ScrollView
                    className="comment-list"
                    scrollY
                    style={{ height: contentHeight - 80 }}
                    lowerThreshold={40}
                    onScrollToLower={handleScrollToLower}
                >
                    {
                        commentList.map((item: any, index: number) => (
                            <View key={index} className="comment-item">
                                <View className="user-photo">
                                    <Image src={item.user.avatar} />
                                </View>
                                <View className="context">
                                    <View className="context-name">{item.user.nickname}</View>
                                    <View className="context-content">{item.content}</View>
                                    {
                                        item.image_path &&
                                        <View className="context-image">
                                            <Image src={item.image_path} />
                                        </View>
                                    }
                                    <View className="context-footer">
                                        <View className="date">{formatTimestamp(item.modified, 'yy-MM-dd')}</View>
                                    </View>
                                </View>
                            </View>
                        ))
                    }
                    {
                        showEmpty &&
                        <View className="empty-container">
                            <Text>没有更多数据了</Text>
                        </View>
                    }
                </ScrollView>
            </View>
            <View className="fixed comment-footer">
                <View className="footer-btn">我也要点评</View>
            </View>
        </View>
    )
}

export default HouseComment

样式：

.comment {
    &-header {
        height: 80px;
        line-height: 79px;
        border-bottom: $border;
        box-sizing: border-box;
        font-weight: bold;
        color: $title-color;
    }
    &-content {
        padding-bottom: 80px;
        .comment-list {
            .comment-item {
                display: flex;
                padding: 30px;
                border-bottom: $border;
                .user-photo {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 30px;
                    background-color: $bg-color;
                    Image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .context {
                    flex: 1;

                    &-name {
                        font-size: $font-basic;
                        color: $text-color;
                    }

                    &-content {
                        font-size: $font-30;
                        margin: 10px 0;
                        color: $title-color;
                    }

                    &-image {
                        width: 200px;
                        height: 150px;
                        overflow: hidden;
                        background-color: $bg-color;

                        Image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    &-footer {
                        display: flex;
                        justify-content: space-between;
                        font-size: $font-26;
                        color: $desc-color;
                        margin-top: 10px;
                    }
                }
            }
        }
    }

    &-footer {
        bottom: 0;
        
    }
}