推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
chengxy

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

  •  
  •   chengxy · Apr 25, 2020 · 6643 views
    This topic created in 2387 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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