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

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

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

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

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

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

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

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

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