V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
chengxy
V2EX  ›  JavaScript

前端问一个无限滚动加载的问题

  •  
  •   chengxy · 2020-04-25 18:18:20 +08:00 · 5014 次点击
    这是一个创建于 1652 天前的主题,其中的信息可能已经有所发展或是发生改变。

    程序背景:主界面是一个可下拉无限加载的列表,辅助页面是对列表项做操作。

    需求:在辅助页面删除数据后,回到主界面,主界面同时删除数据。

    问题:当我删除了某条数据后再次去请求数据(下一页),这时后因为服务器文件少了一条,假如和正常一样发送请求( page * pageSize ),会少一条,怎么解决?

    33 条回复    2020-04-26 20:56:51 +08:00
    zhuowenli
        1
    zhuowenli  
       2020-04-25 18:40:49 +08:00 via Android   ❤️ 3
    不要使用页码发请求,可以通过列表的最后一条数据的 id 作为请求参数。
    maichael
        2
    maichael  
       2020-04-25 19:08:05 +08:00
    不重新获取数据,直接手动把删除的数据标记,根据数据显示该条数据
    chengxy
        3
    chengxy  
    OP
       2020-04-25 19:13:49 +08:00
    @zhuowenli #1 看来我得和后端商量商量了
    chengxy
        4
    chengxy  
    OP
       2020-04-25 19:16:06 +08:00
    @maichael #2 但是我要请求下一页的数据,没太理解,能详细说一下吗?
    ariussssss37
        5
    ariussssss37  
       2020-04-26 00:05:54 +08:00
    带 offset 条数请求,用 id 标志 去 diff
    rick2c
        6
    rick2c  
       2020-04-26 09:17:03 +08:00
    能不能删除以后进行数据刷新
    l1nyanm1ng
        7
    l1nyanm1ng  
       2020-04-26 09:25:23 +08:00
    最近我也同样遇到这种场景了,mark 一下,我暂时也还没解决
    chengxy
        8
    chengxy  
    OP
       2020-04-26 09:34:25 +08:00
    @ariussssss37 #5 看来还是要和后端商量了。
    chengxy
        9
    chengxy  
    OP
       2020-04-26 09:35:17 +08:00
    @rick2c #6 刷新后必须回到第一页了,不然数据会出现错误。
    rick2c
        10
    rick2c  
       2020-04-26 10:01:56 +08:00
    @chengxy 只要判断当前页数据是否为空就行了,不知道你指的数据错误是?
    LeeSeoung
        11
    LeeSeoung  
       2020-04-26 10:02:43 +08:00
    数据总条数有变更直接刷新表格回第一页
    bzj
        12
    bzj  
       2020-04-26 10:09:28 +08:00
    一次性全部加载放到缓存中,从缓存取数据。
    o0
        13
    o0  
       2020-04-26 10:14:57 +08:00
    一般都是刷新一下数据,不过上面的思路都很好。
    lihongming
        14
    lihongming  
       2020-04-26 11:05:55 +08:00 via iPhone
    通过最后一条数据的 id 请求下一个数据+1

    现在有的数据库(比如 AWS 的 DynamoDB )根本不支持 offset 了,只能通过最后一条 id 。

    即使你用 MySQL 之类的支持 offset 的数据库,用 id>也比 offset 效率高很多,数据量小看不出来,你可以试试一亿条数据 offset1000 万,估计数据库直接挂了
    chengxy
        15
    chengxy  
    OP
       2020-04-26 11:34:14 +08:00
    @rick2c #10 我了解你的意思了,指的是把当前页的数据从数组中移除,然后请求当前页数据,重新添加回数组。
    是这样吗?
    chengxy
        16
    chengxy  
    OP
       2020-04-26 11:39:12 +08:00
    @rick2c #10 这样有个问题,假如数组里已经有 5 页数据,每页 10 条,我删除了第 2 页的第 5 条,那这样返回的时候就要重新请求 4 页的数据了。
    rick2c
        17
    rick2c  
       2020-04-26 11:49:11 +08:00
    @chengxy 是这样的,你的原问题是`再次去请求数据(下一页)`时出现少一条数据,这种情况刷新当前页面数据是必须的,如果你是已经做了数据缓存`假如数组里已经有 5 页数据`,这种情况当然不需要做数据刷新,直接数据重组就行了
    chengxy
        18
    chengxy  
    OP
       2020-04-26 11:51:14 +08:00
    @rick2c #17 嗯,我也只是举了一个情况。
    yeqizhang
        19
    yeqizhang  
       2020-04-26 12:37:43 +08:00 via Android
    如果是用户看的页面,
    倒序查询,后台添加数据,也会有问题。
    一般传最新加载的数据的最后一行的 id
    create_date 都好像也可以。
    dreasky
        20
    dreasky  
       2020-04-26 12:43:13 +08:00
    参考 twitter 的 api 设计, 使用 since_id 和 max_id 来获取范围内的 list
    zpfhbyx
        21
    zpfhbyx  
       2020-04-26 12:50:02 +08:00
    非广告, https://j4u.ink/iKVQQF 有无限下拉加载列表.. js 文件 https://j4u.ink/U3ZIXK
    lazy21
        22
    lazy21  
       2020-04-26 13:38:24 +08:00
    使用发布订阅模式,辅助页面发布一个事件,列表监听同一个事件
    wildnode
        23
    wildnode  
       2020-04-26 13:55:23 +08:00
    @chengxy 我们之前的一种做法是,不删除主页面的数据,通过 dispatch 一个事件将主页面中的那条数据标记为已删除,然后通过 UI 的方式告知用户这条被删掉了,不可操作。不知道你们能这样搞不。。
    Yourshell
        24
    Yourshell  
       2020-04-26 14:02:28 +08:00
    可以看一下 service worker
    uchihaObito
        25
    uchihaObito  
       2020-04-26 15:03:40 +08:00
    是不是可以这样,声明一个 deleteCount,每次有删除的时候 deleteCount+1,然后请求下一条分页的时候 offset 传本来应该传的 offset-deleteCount,请求成功后 deleteCount 重新置 0
    hoythan
        26
    hoythan  
       2020-04-26 15:06:54 +08:00
    后端改个毛,非常合理的设计,删除的时候你应该前端标记它让他不显示而已,页码还是正常的加载。
    上拉刷新或者刷新的时候再取消标记
    hoythan
        27
    hoythan  
       2020-04-26 15:12:38 +08:00
    记得防止无限滚动的时候占位别丢了就行。
    VWMMWV
        28
    VWMMWV  
       2020-04-26 15:19:22 +08:00
    之前的做法都是返回后加载第一页的数据,看完你们的思路,觉得很好,就是不知道后端愿不愿意改
    zhuojiu
        29
    zhuojiu  
       2020-04-26 15:31:40 +08:00
    状态删除不就行了吗?
    uchihaObito
        30
    uchihaObito  
       2020-04-26 15:56:25 +08:00
    @zhuowenli 如果筛选条件的分页是不是就不能用 id 了
    chengxy
        31
    chengxy  
    OP
       2020-04-26 17:46:16 +08:00
    @hoythan #27 是指的不发送删除请求吗,用户关闭了页面怎么办?
    luoruiqing
        32
    luoruiqing  
       2020-04-26 18:02:00 +08:00
    置灰~
    zhuowenli
        33
    zhuowenli  
       2020-04-26 20:56:51 +08:00 via Android
    @uchihaObito 是的,只适合流式分页
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2879 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:24 · PVG 22:24 · LAX 07:24 · JFK 10:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.