1
// Redis ZSet数据：key = "user:123:feed"
2
/*
3
动态ID    分数(时间戳)    说明
4
post:005   1686900000    ← 最新（分数最高）
5
post:004   1686800000
6
post:003   1686700000
7
post:002   1686600000
8
post:001   1686500000    ← 最旧（分数最低）
9
*/

1
// 第一次请求：首屏加载
2
ScrollResult result1 = feedService.getUserFeed(123L, null, 0L, 2);
3
/*
4
查询：reverseRangeByScoreWithScores(key, 0, Double.MAX_VALUE, 0, 2)
5
返回：post:005(1686900000), post:004(1686800000)
6
lastScore = 1686800000 （记录本次查询的最小分数）
7
*/
8

9
// 新数据插入后...
10

11
// 第二次请求：加载历史动态
12
ScrollResult result2 = feedService.getUserFeed(123L, 1686800000.0, 0L, 2);
13
/*
14
查询：reverseRangeByScoreWithScores(key, 0, 1686799999, 0, 2)
15
查询条件：分数 < 1686800000（排除已看过的post:004）
16
返回：post:003(1686700000), post:002(1686600000)
17
lastScore = 1686600000
18
*/
19

20
// 第三次请求：继续加载
21
ScrollResult result3 = feedService.getUserFeed(123L, 1686600000.0, 0L, 2);
22
/*
23
查询：reverseRangeByScoreWithScores(key, 0, 1686599999, 0, 2)
24
返回：post:001(1686500000)
25
lastScore = 1686500000
26
*/

1
Set<ZSetOperations.TypedTuple<String>> typedTuples = stringRedisTemplate.opsForZSet()
2
    .reverseRangeByScoreWithScores(key, 0, max, offset, count);

1
// 前端维护分页状态
2
let lastScore = null;
3

4
// 首次加载
5
async function loadFirstPage() {
6
    const result = await api.getFeed(userId, null, 0, 10);
7
    lastScore = result.lastScore;
8
    renderFeeds(result.feeds);
9
}
10

11
// 加载更多（下拉刷新）
12
async function loadMore() {
13
    const result = await api.getFeed(userId, lastScore, 0, 10);
14
    lastScore = result.lastScore;
15
    appendFeeds(result.feeds);
16
}

1
@Override
2
public Result queryFeedOfFollow(Long maxScore, Integer offset) {
3
    // 1.获取当前用户ID
4
    Long userId = UserHolder.getUser().getId();
5

6
    // 2.构建Redis key，通常格式为：feed:userId
7
    String key = FEED_KEY + userId;
8

9
    // 3.执行滚动分页查询
10
    // ZREVRANGEBYSCORE key maxScore minScore LIMIT offset count
11
    Set<ZSetOperations.TypedTuple<String>> typedTuples = stringRedisTemplate.opsForZSet()
12
        .reverseRangeByScoreWithScores(key, 0, maxScore, offset, 2);
13

14
    // 4.非空判断
15
    if (typedTuples == null || typedTuples.isEmpty()) {
16
        return Result.ok();
17
    }
18

19
    // 5.解析数据并计算下次查询参数
20
    List<Long> ids = new ArrayList<>(typedTuples.size());
21
    long minTime = 0;        // 本次查询结果中的最小时间戳
22
    int offsetNext = 1;      // 下次查询的偏移量初始值
23

24
    // 6.遍历查询结果，提取ID和计算offset
25
    for (ZSetOperations.TypedTuple<String> tuple : typedTuples) {
26
        // 6.1.提取数据ID
27
        ids.add(Long.valueOf(tuple.getValue()));
28

29
        // 6.2.获取时间戳分数
30
        long currentTime = tuple.getScore().longValue();
31

32
        // 6.3.计算下次查询的offset（核心算法）
33
        if (currentTime == minTime) {
34
            // 相同时间戳：计数累加
35
            offsetNext++;
36
        } else {
37
            // 不同时间戳：更新最小时间戳，重置计数
38
            minTime = currentTime;
39
            offsetNext = 1;
40
        }
41
    }
42

43
    // 7.最终offset计算（关键逻辑）
44
    // 如果本次最小时间戳等于查询的最大时间戳，说明还在相同时间戳范围内
45
    // 需要累加之前的offset；否则进入新时间戳范围，使用当前计算的offset
46
    offsetNext = minTime == maxScore ? offsetNext + offset : offsetNext;
47

48
    // 8.根据ID查询具体业务数据
49
    String idStr = StrUtil.join(",", ids);
50
    List<FeedItem> feedItems = query().in("id", ids)
51
        .last("ORDER BY FIELD(id," + idStr + ")").list();
52

53
    // 9.业务数据处理（如查询用户信息、点赞状态等）
54
    for (FeedItem item : feedItems) {
55
        // 处理业务相关数据
56
        processFeedItem(item);
57
    }
58

59
    // 10.封装分页结果
60
    ScrollResult result = new ScrollResult();
61
    result.setList(feedItems);
62
    result.setOffset(offsetNext);      // 下次查询的偏移量
63
    result.setMinTime(minTime);        // 下次查询的最大分数
64

65
    return Result.ok(result);
66
}

1
class FeedPagination {
2
    constructor() {
3
        this.maxScore = null;      // 上次查询的最小时间戳
4
        this.offset = 0;           // 当前偏移量
5
        this.loading = false;      // 加载状态
6
        this.hasMore = true;       // 是否还有更多数据
7
    }
8

9
    // 首次加载feed流
10
    async loadFirst() {
11
        this.loading = true;
12
        try {
13
            const response = await api.queryFeedOfFollow(null, 0);
14
            const result = response.data;
15

16
            // 更新分页参数
17
            this.maxScore = result.minTime;
18
            this.offset = result.offset;
19
            this.hasMore = result.list && result.list.length > 0;
20

21
            return result.list;
22
        } finally {
23
            this.loading = false;
24
        }
25
    }
26

27
    // 加载更多数据
28
    async loadMore() {
29
        if (this.loading || !this.hasMore) return [];
30

31
        this.loading = true;
32
        try {
33
            const response = await api.queryFeedOfFollow(this.maxScore, this.offset);
34
            const result = response.data;
35

36
            // 更新分页参数
37
            this.maxScore = result.minTime;
38
            this.offset = result.offset;
39
            this.hasMore = result.list && result.list.length > 0;
40

41
            return result.list;
42
        } finally {
43
            this.loading = false;
44
        }
45
    }
46
}
47

48
// 使用示例
49
const feedPagination = new FeedPagination();
50

51
// 首次加载
52
const firstPage = await feedPagination.loadFirst();
53
console.log('首页数据:', firstPage);
54

55
// 滚动加载更多
56
const secondPage = await feedPagination.loadMore();
57
console.log('第二页数据:', secondPage);