任务悬赏

跨章节数据加载

需求

章节滚动到底部时,自动加载下一章内容,章节滚动到顶部时,自动加载上一章内容。

解决办法

未找到合适的解决办法

遇到的问题

用户滚动起来手感很不畅爽

长内容的加载问题

需求

用户可以在Dimzou中插入很长得内容,比如一本完整的圣经的内容或本文内容为4.5兆大小。内容插入之后,再次访问文章,页面内容可以正常加载。

当前解决办法

将段落的内容分成区块进行显示。使用 react-virtualized 优化页面渲染

出现的问题

在 windows 的 edge 中长度为4.5兆的文本内容的后半部分无法完整显示出来。微软的edge浏览器对内容有最大高度限制。 react-virtualized 自动设置的高度值超出这个范围,不起作用,造成页面最多只能滚动到内容的中间部分。

最大高度约为1533916.89

长内容的内容定位

需求描述

使用者可以根据编辑的需要,将内容定位到对应段落的具体位置,使对应段落在页面上显示。如:用户点击侧栏的大纲,页面自动显示对应位置的内容。用户点击消息推送的“查看按钮”,页面自动显示对应段落。

解决办法

由于 react-virtualized 的功能限制,设置 scrollToIndex 参数时,页页面滚动都对应的段落位置。所以现在的实现方式是:反复滚动页面,知道目标段落出现在页面中。具体步骤为:先计算当前渲染位置与目标段落的之间隔了多少个段落,然后根据相隔的段落数量,获得一个预计的滚动范围,滚动页面。反复操作页面的滚动条位置,直到目标段落出现在页面内,然后将目标段落定位到页面顶部附近。

出现的问题

在 safari 中使目标段落出现在页面内的操作,容易进入一个死循环,页面一直在上下滚动,无法停下来。这种现象在定位到文章末尾段落的时候特别容易出现

其他:

演示DEMO: https://f9yg3.codesandbox.io