FireBase和LiveData卡片视图中的文本不会出现，内容也不会更新(我可以看到卡片，但没有内容) - 腾讯云开发者社区

可以看到在5000条数据场景下，刷新页面白屏时间过久：更新阶段计算时间也很久，严重阻塞用户操作：为了解决白屏问题，临时基于同步计算的版本用 requestIdleCallback 来做了优化，但还存在一些问题...排版计算的规则顺序有一些问题。由于当时是直接设置了一个粒度（比如300个卡片作为一片），在刷新或者更新后去滚动页面，「虽然没有白屏现象了，但卡顿依然非常明显。」...看板视图可以根据单选列作为分组依据，进行卡片的一个聚合分组展示，而且卡片的高度是不固定的，只有当前列有内容才会展示出来。...对于多行文本来说，内容超过四行就展示四行，否则有几行就展示几行，多选项也是类似的逻辑，所以每个卡片的高度都需要单独计算。...画册视图虽然也是卡片，但没有分组，卡片高度始终固定，所以不会被排版计算的问题困扰。 3. 为什么会慢？

8073 0

腾讯文档的7个秘笈

最后生成了下面这份火焰图，可以看到有很多红色倒三角，说明这里出现了一些很耗时的操作。放大这个火焰图，可以看到其中的一个 Task 的耗时，也就是一帧的耗时。...从图上可以看到，很明显耗时下降了。当我们优化到这一步发现：在没有出现新的卡片时，滚动的耗时已经非常少了，基本上耗时都在绘制阶段。绘制阶段的耗时达到了 13 ms 之多。...看板滚动主要有两种情况：第一种，没有出现新的分组和卡片，当前只是在可视区域的卡片内滚动；第二种，出现了新的分组和卡片，涉及到了节点的销毁和新增。...对于第一种情况来说，此时没有新增卡片，多卡片离屏渲染只需要把离屏 Canvas 里面的内容绘制到主屏就行了。...各位开发者可以看到最终的优化效果，绘制的耗时只有 2 ms。但正如前面说的，离屏渲染只是针对已经渲染好的卡片进行的。那如果滚动的时候，出现了新的卡片怎么办？这部分渲染依然会很耗时。

4.8K5 1

您找到你想要的搜索结果了吗？

是的

没有找到

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

我也想在我们的项目中使用Twitter Bootstrap，所以我也运行yarn add bootstrap@v4.0.0-beta.2并编辑我们的项目styles.scss以包含以下内容： /* You...或者，您可能已经在所有那些华丽的AngularJS演示中看到了它，您可以在其中输入要输入的值并为我们更新页面内容。这里有一个有趣的小技巧：在Angular中，双向数据绑定已经不再适合我们了。...之后，我们可以调用我们的addCard方法，在该方法中，我们onCardAdd从我们的卡片中输出Angular 文本，并将卡片文本重置为空字符串，以便用户可以继续添加新卡片而无需编辑旧卡片的文本。...我们正在看到RxJS的行动。我们来讨论一下。我猜你们至少都知道一些关于承诺和构建异步代码的内容。承诺处理单一事件。POST例如，我们要求浏览器创建一个承诺。...我们还使用Gulp来压缩我们的工件，因为Angular CLI 不再为我们做。我觉得很奇怪，但好吧，让我们添加Gulp和压缩脚本。

42.7K1 0

「可视化搭建系统」——从设计到架构，探索前端领域技术和业务价值

其特点和技术方向可以各有特点，但总体可以归纳为以下图示： ? 技术方向按照目标受众，可区分： ?...灵活强大的 Markdown 编辑器和页面搭建创新尝试我相信现如今没有程序员不知道 Markdown，它对程序员或者所有互联网从业人员来说都非常友好。...相信很多人都经历过编辑器的体验之殇：“输入卡顿、诡异的光标位置”等，但这里我认为没有必要分析传统编辑器的体验优化话题，更有意义的是从我们特有的多功能编辑器特点入手，聊一聊用户体验。...基于此，我们可以非常顺利地完成自定义区块的更改：比如当前选中区块为一个 id 是 1234 的 Sku 卡片，如果运营需要替换为 id 是 5678 的 Sku 卡片，只需要选择当前区块，选中之后在右侧出现的编辑区中更改...方法一并更新状态，最终反应在编辑器视图中。

2K3 0

为什么我们不擅长 CSS

这张卡片包含一个推荐信，但我们可能想在不同的上下文中使用这种卡片模式。我们的卡片不应关心其内部的内容。也就是说，在这个特定的卡片示例中，我们不会使用 .card- 对所有内容进行限定。...每当我看到一个 mixin 会对调色板中的每种颜色进行排查，并为每种颜色创建一个背景色实用工具类时，我都会感到恶心。...此外，由于我们使用的是 SCSS，因此我们可以在标记名上使用更多字数，因为无论如何，它们都会编译成更小的值。这个特定卡片中的内容包括一张图片和一个块状引文，使用 flexbox 水平排列。...（这是针对一个非常具体的设计选择需要考虑的很多事情，但这种情况确实会发生。）我们还需要考虑头像在小屏幕上的定位问题。这就需要一些只出现在小屏幕上的实用类。...，看到了他们实际使用的所有实用类和内联样式，而这些在代码示例中并没有显示出来。

2021 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

通过设置高度，我的意思是项目应该有内容(不是空的)，也不是添加一个显式的高度。...在上面的模型中，我们有水平放置的卡片，还有一个滚动条，可以滚动并显示更多内容。...touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) 当一个inline-block元素的overflow值不是visible的时，这将导致该元素的底边根据其同级元素的文本基线对齐...大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。长词或链接处理内容中的长字或链接时，它应该换行，否则，将会出现水平滚动。 ? 为了解决这个问题，我们需要中断长单词和链接。

5.2K2 0

Firebase In-App Messaging 应用内消息

举例：玩游戏通过某个关卡时发送应用内消息促使他们完成重要的应用内操作应用内消息可以自定义，使其显示为卡片、横幅、模态窗口或图片，并设置触发器，使其在合适时机出现 In-App Messaging 的集成...iOS、Android、flutter 相关处理，详情可见 In-App Messaging 用途通过 Firebase 控制台可以修改消息的样式、定位和推送时间 Firebase In-App Messaging...提供消息模板，您可以进行实验并根据自己的喜好进行自定义卡片包含两个操作按钮的结构化消息为用户提供选择 Snip20230915_17.png 模态...宣传活动的名称：用于宣传活动报告，不会显示在消息中宣传活动说明：用于宣传活动报告，不会显示在消息中可以定义多维度多角度的受众群体应用内消息还支持多语言 Snip20230915_24.png 时间安排...使用 Firebase 控制台向消息添加操作修改卡片、按钮文字、按钮操作、图片等等 Snip20230915_32.png 修改消息的外观和风格 iOS、Android、Flutter，详情可见

4221 0

Material Design —卡片（Cards）

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...卡片不会翻转以显示背面的信息。支持的手势卡片手势应始终在卡片集合中实施。支持的手势包括：滑动手势（swipe gesture）可以在每张卡片上使用。限制视图内的轻扫手势，使其不会彼此重叠。...从左到右，从上到下滚动卡片集合只能垂直滚动。超过最大卡片高度的卡片内容会被省略，内部不会滚动，但可以扩展卡片。一旦展开，卡片可能会超过视图的最大高度。...但当能改善内容布局和易读性时，则可以将其放置在右下角。注意不要让溢出菜单负荷的操作太多。 ? 其他操作强烈建议不要在文本内容中使用内联链接。...虽然卡片可以支持多种动作，UI控件和溢出菜单，但请使用限制，并记住卡片是进入更复杂和详细信息的入口点。 ?

4.3K10 0

卡片笔记太多，回忆不起来？快用人工智能帮你自动找寻关联

在此之前，它仅仅是一个容器，我们可以从中获取所放入的内容。但这种情况会随着卡片盒的规模和复杂性的增加而发生改变。我们一直啧啧称奇的「知识复利」其实都来自于这种卡片规模与网络链接的复杂性。...吴刚老师所做的，还是潜移默化帮助你构建习惯；而我则希望更进一步，让你不必作出改变，也能把「偷懒」进行到底。换句话说，有没有更低成本方式，解决远期卡片的回顾和连接呢？这个当然可以有。...这样分析静态的内容，会不会有功能欠缺？我觉得不会。因为你要关联的，是时间上的远距离记录，是你大概率已经忘掉的部分卡片。我想，你还不至于把一个小时以内写的东西，都忘记了吧？...这一半，就是头脑的重要性。没办法，老天爷并没有给每一个人相同的智商。爱因斯坦那脑子，在专利局当办事员，也遮掩不住光芒万丈。但是，工具没有用吗？近视的人，可以通过戴眼镜来矫正视力。...不会四则口算的收银员，也可以按计算器来得出正确结果。你从三岁练武，学了一身「五虎断魂枪」的上乘功夫。我手无缚鸡之力，但是手里端着把上膛的手枪，你也得忌惮三分不是？

8562 0

上云上的差点破产是什么体验？

不难想象，如果我在起床刷牙的时候看到我500额度的信用卡刷了一个几万的账单出来，我也会当场晕倒。...这样 Cloud Run 中的每个实例只会抓取一个页面，所以永远不会超时。这样做的隐患就是： 1、不中断的指数递归：由于没有 break 语句，因此实例不知道该何时中断。...无怪乎那么贵了从这个事情我们可以看到，云服务上部署了一个错误的算法，在完全不了解的情况下使用了Firebase，最终导致了天价账单的产生，所以一般常识里面的一边学习一边开发，其实是很危险的一个行为。...尤其是在云平台上进行一些不确定的开发测试，云平台像是一把双刃剑。如果使用得当，它确实威力巨大；但如果使用不当，后果也将极为严重。...喜欢本文的朋友，欢迎点击下方卡片关注我，订阅更多精彩内容往期推荐一个员工的离职，背后都意味着什么？彻底解决 gcr、quay、DockerHub 镜像下载难题！

2.3K1 0

当卡片式UI不再流行，列表式UI将是王牌

我们第一次接触卡片问题是在 Goal News 发布之后 - 见图。屏幕上可以看见少量的抱怨的文章。例如： ? 用户关于卡片得反馈截图太多的图片而且需要不停地滚动。我只是想快速的浏览新闻。...我们可以看到一个基于卡片式的网站的更大的用途。...虽然用户滚动更多，他们仍然看到较少的内容，比较左侧网站少了3篇文章。可阅读的文章数很明显，列表的好处是你可以在视图中放更多的新闻文章，从而更快地扫描标题。...Material Design 建议的是列表是“可快速扫描”，适合显示类似的重复的内容。当用户不直接比较图像或文本时，不推荐使用卡片式。...虽然卡片式有更大的影响。图片是抓住用户的注意。附加信息如摘录和标签，也可以出现在卡上。在用户提交请求之前给他们更多的信息。

3.2K7 0

太卷了，Obsidian 和 Logseq 纷纷推出白板功能

/ 白板的一个共同的特点就是无边，上下左右可以无限扩展，没有边际，其他的则各有侧重点，有的支持良好的协作、有的支持多种白板元素，从功能上来说，我认为可以分为两类： 1、以卡片为基础，构建卡片之间的联系，...拖动锚点便可以实现多个卡片之间的连接，非常方便： 4、卡片中可以支持 Markdown 格式的文本输入，每个卡片都可以设置自己的颜色：如果在白板中创建的卡片，卡片内容保存在白板中；如果是拖入的其他的笔记到白板中产生的卡片...，卡片中的内容和原始笔记是同一份，需要修改时，修改任意一处即可； 5、在卡片中输入双中括号可以进行双向链接，可链接到其他的笔记和白板，创建链接后，鼠标移动上去可以看到对应笔记的内容或白板的缩略图： 6...，厉害的是视频可以直接在卡片中播放，这三种元素也可以和普通卡片进行连接：我经常说通过输出来倒逼输入，那么从输入到输出的中间环节，就需要对信息进行组织加工。...Logseq 的白板从功能上来看，也比较完善，但使用上没有 Obsidian 的白板顺手，当然这是我个人的感觉。

2.1K2 0

Mirages主题帮助文档

在线更新完成后，旧版主题暂时不会删除，如果您没有修改过主题的源代码，则可以点击下方的删除旧版主题功能清理旧版主题，否则，请在执行必要的备份或迁移工作后再对旧版主题进行清理。...在编辑文章的时候右边（手机的话是下方）高级选项里可以选择密码保护或私密，密码保护的文章所有人都能看到，但需要输入密码后才能查看文章的标题和内容，私密则仅有自己可以看到，隐藏的话，所有人都不能在文章列表里看到...在主题的外观设置页面可以查看到主题的版本及最新版是多少，默认情况下仅展示正式版，若想接收开发版主题，则可以在主题专用插件设置的仅接受正式版更新选项选择否，我愿意更新到开发版。...不止这些，一些新加的且我觉得并不常用的设置项也可以在这里进行配置。配置方法和其他的一些多行配置一样，也是一行一个，每一个配置由设置名 + 设置值组成。...另外，用户也可以通过页面上的阅读设置进行选择，但仅对该用户生效。

10.1K2 0

京喜小程序首页无障碍优化实践

但至今为止，互联网产品的无障碍优化进展仍然缓慢，很多网站建设和移动端 APP 的开发都还未考虑无障碍优化，即使是通过读屏软件，也很难获取想要的信息。障碍群体调研 ?...非文本元素增加描述和角色属性通过给非文本元素增加描述和角色属性，元素的内容就可以被读屏软件清晰准确地朗读。...当障碍用户聚焦到轮播图后，读屏软件将子元素的描述朗读读来。轮播图继续轮播，焦点索引却不会随轮播状态自动更新，而是跟随当前子元素滑动消失在屏幕中。若要获取更新后的轮播信息，需要重新聚焦。 ?...商品图但单独读出每个子元素，不便于障碍用户理解商品卡片的完整含义。类似这样的场景，可以将商品卡片当作一个按钮整块处理。...当障碍用户在安卓手机上聚焦后，读屏软件不仅会将整合的商品信息和 role 朗读出来，还会将商品卡片子元素的文本内容朗读出来。

1.4K3 1

“罗马不是一天建成的”：Roam Research 101 系列之每日笔记与页面引用

虽然说一个厉害的人，有自己方法论的人用什么工具都可以，哪怕只是纸笔也能疯狂输出，但问题在于大部分人只是普通人。...更有趣的是《卡片笔记写作法》中也有关于“文字是固定化结构的图像”的描述，也让我对中文方块字有了不一样的认识和理解。让我和你保持“好奇心”，开始接下来的旅程吧！...或许，相比之下，我的 DEVONthink 更像是地下室，或者楼阁，一般不会去找，但如果要翻找，也能方便地搜索。...我最喜欢 Roam 的一点就是「一处修改，处处更新」，而不断迭代 Iteration 和持续改进才是学习的关键。...也可以是自上而下，通过智慧消费产生知识、信息，最后又可以落到最底层的数据上。 4.2 “没有写作，就无法思考” 卢曼说，“没有写作，就无法思考”。

1K4 0

原生长列表内嵌 Flutter 卡片性能调研

在上图 "#5 at 11" 的文本中，5 代表这个卡片的 ID，对应创建的 FlutterView/FlutterEngine 的序号，11 代表这个卡片在 RecyclerView 显示的位置，从这段文本我们可以很清楚地看到创建的...对象时，会重新随机产生一个新的卡片高度，并通过 MessageChannel 通知 FlutterEngine 更新内容，触发该卡片的 Widget 树的更新和重布局，每个卡片显示一张图片和两段文本；...，引擎优化降低了 3ms 左右的耗时；可以看到，在开启引擎优化后，Surface Destroy 和 Create 的耗时都很少，绝大部分情况下都不会导致掉帧。...相关的 Android 渲染流水线帧调度的分析，可以参考我的文章TextureView 的血与泪内存占用分析为了排除图片解码缓存内存管理的干扰，我们专门测试了无图和有图两种情况，并且增加了开启引擎优化和关闭引擎优化的对比...如果没有开启引擎优化，我们会看到大量额外的线程和 GL 上下文会导致 Native Heap 和 GL mtrack 大幅增加，总共增加了 68m。

1.4K2 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

保持我的风格：clamp(, , ) 图片这里，我们介绍一些只有少数浏览器支持的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。...这可以实现更清晰的布局，因为文本不会太宽（超过 46ch ）或太窄（小于 23ch ）。这也是实现响应式排版的好方法。...这是一种很好的技术，可以通过最小和最大尺寸值确保易读性，但请记住，并非所有现代浏览器都支持它，因此请确保您有回退措施并进行测试。....square { aspect-ratio: 1 / 1; } 虽然此功能仍在不断完善中，但它值得了解，因为它解决了许多开发人员面临的冲突，我自己也多次面临，尤其是在视频和 iframe 方面。

4.7K2 0

静态网页托管平台的选择

好看的东西看多了就会不好看, 简单的东西永远不会难看 GitHub Pages 提供静态网站托管服务的厂商还是很多的, 上次这个博客还是在阿里云的OSS上面, 虽然oss很便宜但还是没有一种”永久使用权...完全免费, repository上线1G 支持git动态更新后台, 本地同步备份 GitHub域名服务支持CDN 丰富的教程和扩展工具这么看来GitHub Pages有3大免费: 免费仓库, 免费域名...我当初写Blog Lite的初衷是做一个”目录”来把我的许多第三方博客平台和个人网站统一起来, 一目了然, demo也可以在我的page上看到: https://jinhengyu.github.io/...看完之后如果不够舒适…其实也可以在此之上二次开发, 不用标记版权, 因本身就是我一时兴起的作品哈哈, 更多截图请看进入demo目录卡片布局卡片布局(Card Layout)是经典的UI组件, material...// album的名字(短文本) name: String, // album的描述(长文本) about: String, // album中每一个卡片(外链

1.4K3 0

Lattics：一款简单易用、好看强大的「类脑式」知识管理工具，笔记应用与写作软件二合一

用户经常在选择工具和使用工具上耗费了太多时间，然而却没有记录多少笔记，对外产出也很少。基于此，如何快速找到一款适合自己的个人知识管理工具呢？...如图，Lattics 的鸟瞰视图，可以展示文章之间的层级体系，也可以显示内容之间的引用关系。从而，用户可以在内容和结构之间不断切换，实现见树又见林。内容组织：卡片拆分和合并Lattics 是块编辑器。...目前的设计是，需要在文档的信息面板中查看标签。一方面，目前没有支持相关的快捷键。另一方面，即便支持快捷键，事实上有相当多的用户不会使用快捷键。...基于个人体验，沉浸模式对于降低干扰，强化心流确实有一定的帮助。打字机模式：这主要是指随着内容的不断输出，文本内容一直不断上移。用户的光标一直聚焦于页面中间位置。希望 Lattics 也能支持此功能。...新增卡片。在图谱中，创建新的独立卡片的时候，理论上是应该出现在卡片库。目前，在思维导图和情节视图中新增的卡片，在编辑器页面却不显示内容。建议优化。注释：Lattics 访问地址

2.2K3 0

无框界面

卡片刚好能够解决这一点，因为它将内容封装成固定的小区块，像水一样，可以放在任何比自己大的容器中。不但如此，卡片式界面还可以根据需要岁时删减卡片，以此灵活控制界面上的内容种类和数量。...上面的是原版界面，下面的是我修改的无框版掌控注意力看上图的原版界面时，第一眼很有可能看到的是卡片中的边线，而不是内容。这是因为白色卡片和灰色背景的对比非常明显，而尺寸又很大，所以非常吸引注意力。...而卡片中的内容，因为在卡片中挤作一团，所以很容易被忽视。看上图中的无框版界面时，因为没有边线，只有内容，所以用户第一眼的注意力肯定是在内容上。用户之于界面，最宝贵的莫过于注意力。...然而如果去掉边框，用距离分割内容区块，那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距，也通常不会超过有边框情况下内外边距之和。...但界面的直接粗暴并不一定与识别性完全冲突，即便操作界面的识别性为零，也可以通过Logo、文字等手段来树立品牌形象。

1.3K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

异步分片计算在腾讯文档的实践

腾讯文档的7个秘笈

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

「可视化搭建系统」——从设计到架构，探索前端领域技术和业务价值

为什么我们不擅长 CSS

CSS 中关于 Overflow ，你需要了解的这些知识点！

Firebase In-App Messaging 应用内消息

Material Design —卡片（Cards）

卡片笔记太多，回忆不起来？快用人工智能帮你自动找寻关联

上云上的差点破产是什么体验？

当卡片式UI不再流行，列表式UI将是王牌

太卷了，Obsidian 和 Logseq 纷纷推出白板功能

Mirages主题帮助文档

京喜小程序首页无障碍优化实践

“罗马不是一天建成的”：Roam Research 101 系列之每日笔记与页面引用

原生长列表内嵌 Flutter 卡片性能调研

【CSS】1287- 一行 CSS 实现 10 种强大的布局

静态网页托管平台的选择

Lattics：一款简单易用、好看强大的「类脑式」知识管理工具，笔记应用与写作软件二合一

无框界面

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐