首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

打造聊天框丝滑滚动体验:AI 聊天框翻转之道

如果在 web 什么也不做,聊天体验可能是这样,需要用户手动滚动到最新消息:试想一下如何在 web 中实现微信效果。每当聊天框中接收到新消息,都需要调用滚动方法滚动到消息底部。...每输出一个文字要滚动一次,听起来就会性能焦虑。AI 正在输出内容用户无法滚动查看历史消息。用户向上滚动查看历史消息,会被 Javascript 不断执行 scrollIntoView 打断。...滚动条调整与滚动行为反转最核心问题已经解决了,但总觉得哪里看起来怪怪滚动条怎么跑到左边,并且滚动行为和鼠标滚轮方向反了,滚轮向上滚,聊天框却向下滚。...然后在通过监听滚动事件,改变滚动方向就可以恢复鼠标滚轮滚动行为。...消息卡片组件完全感知不到自己其实已经被旋转了 180° 后又旋转了 180° 了。聊天框父组件也完全不知道自己子节点被转了又转。

1.2K21

Android中文API——ScrollView

参数 canvas 绘制视图画布 public boolean executeKeyEvent (KeyEvent event) 接收到key事件用户可以调用此函数来使滚动视图执行滚动,类似于处理由视图体系发送事件...(译者注: 如何监听android屏幕滑动停止事件) 参数 velocityY Y方向初始速率。正值表示手指/光标向屏幕下方滑动,而内容将向上滚动。...Down事件或者由视图组一个子视图处理,或者被用户自己onTouchEvent()方法处理;此处理意味你应该执行onTouchEvent()返回true,这样才能继续看到剩下手势(取代找一个父视图处理...此方法将向上或者向下滚动一屏,并且将焦点置于新可视区域最上/最下。如果没有适合component作为焦点,当前scrollView将收回焦点。...参数 direction 滚动方向:FOCUS_UP表示向上一页,FOCUS_DOWN表示向下一页。 返回值 此key事件被消耗(cosumed)返回true,其他返回false。

4.5K30
您找到你想要的搜索结果了吗?
是的
没有找到

仿【每天】首页动画

所以本来今天是打算总结一下这些日子学习Core Animation心得,但是突然发现更早之前一兴起写的卡片动画还没完成,强迫症不能忍啊,果断花了一个下午大致搞定了,先上图: ?...结果突然就忙了起来,“山寨”计划胎死腹中,到今天也只来得及写了一个卡片动画。代码在这里,大家有兴趣的话可以看看。 大致介绍一下思路吧,这个动画主要是分为卡片飞上飞下和日期小圈圈中数字滚动两部分。...其实【每天】日期并不是这样滚动,而应该是两个Label飞上飞下,我这个小圈圈是参考了之前看到叶孤城一篇博客做,个位数跟十位数分别放一个ScrollView,然后放上显示0-910个Label...再说到卡片动画,这个稍微复杂一点,主要是手势处理,要分多种情况(第一张,最后一张向上向下,边界条件处理),由于我是用 pan手势(拖动),而不是swip手势(快速滑动),是没有direction...(self).y if touchPointY > 0 { 还有这样: //滑动停止时取停止y值与起始点y值比较,若停止点y大于起始点y则为向下滑动 case .Ended

89720

《Linux从零到精通》基础与常用操作

向下一行 /:搜索 例:/seyink :f:立刻显示文件名和行数 b:翻到第一页 q:离开 查看文件-less less(一页一页翻动) 空格:向下翻动一页 pagedown:向下翻动一页.../关闭并且开机以后,强行略过磁盘检查 - F //重启后,强制进行磁盘检查 - c //取消已经在进行shutdown指令内容 举例: shutdown -h now //现在马上停止服务之后关机...命令 结果 空格 向前(向下滚动一个屏幕 PageDown 向前(向下滚动一个屏幕 PageUp 向后(向上滚动一个屏幕 向下箭头键 向前(向下)...滚动一行 向上箭头键 向后(向上滚动一行 d 向前(向下滚动半个屏幕 u 向后(向上滚动半个屏幕 /string 在 man page 中向前(...向下)搜索 string n 在 man page 中重复之前向前(向下)搜索 N 在 man page 中重复之前向后(向上)搜索 g

94930

Material Design 实战 之第四弹 —— 卡片布局

其中, scroll 表示RecyclerView向上滚动,Toolbar会跟着一起向上滚动并实现隐藏; enterAlways 表示RecyclerView向下滚动...,Toolbar会跟着一起向下滚动并重新显示; snap 表示Toolbar还没有完全隐藏或显示,会根据当前滚动距离,自动选择是隐藏还是显示。...AppBarLayout接收到滚动事件时候,它内部子控件是可以指定如何去影响这些事件, 通过app:layout_scrollFlags属性就能实现。...其中, scroll表示RecyclerView向上滚动,Toolbar会跟着一起向上滚动并实现隐藏; enterAlways表示RecyclerView向下滚动,Toolbar会跟着一起向下滚动并重新显示...当用户需要操作Toolbar上功能,只需要轻微向下滚动,Toolbar就会重新出现。

2.1K10

Linux命令3-cat、more、less

重命名:对文件或者目录进行重命名 常用参数: -i 若存在同名文件,则向用户询问是否覆盖 -f 覆盖已有文件,不进行任何提示 -b 文件存在,覆盖前为其创建一个备份 -u 源文件比目标文件新,...向下一行 q 离开more指令,不再显示文件内容 Ctrl+F 向下滚动一屏 Ctrl+B 返回上一屏 = 输出当前行行号 V 调用vim编辑器 !...、目录等 -i 搜索忽略大小写 -m 显示类似more指令百分比 -N 显示每行行号 -o[文件名] 将less输出内容保存到指定文件中 -s 连续空行显示为一行 /字符串 向下搜索字符串 ?...搜索) b 向上一页 d 向后半页 j 向前移动一行 k 向后移动一行 G 移动到最后一行 g 移动到第一行 Q、ZZ 推出less指令 u 向前滚动半页 y 向前滚动一行 空格键 滚动一页 回车键...滚动一行 [pagedown]: 向下翻动一页 [pageup]: 向上翻动一页 less hello.log -- 查看日志内容 ps -ef | less -- 进程信息通过less分页显示

6.5K20

css+js实现左右滑动卡片组件

无限滚动原理 由于这里停止位置是固定,前排永远是当前卡片相对于视口居中,后排永远是两个卡片相对于视口居中,且每个卡片是一样,所以卡片列表向前或向右移动到一个目标位置,都将列表重置为初始位置继续滚动...如下图以前排卡片为例: 1544756683_12_w2480_h1496.png 所以滚动停止后会统一将列表样式设置为transform: translateX(0)。...而对于用户这一操作是无感知,认为已经滑动到了新位置。 3.滑动过程实现 a....目标位移与帧位移 为了做出滑动后到停留位置缓动效果,所以当用户左右滑动屏幕,会记录滑动距离,计算出卡片该到目标位移位置,目标位移位置是有规则,因为这里有10张卡片均分宽度,位置必须是(100%/...连续滑动判断 当在上次滑动动画还未播放结束用户又进行了第二次滑动,需要执行一下操作:     1).

30.1K102

【愚公系列】2023年11月 Winform控件专题 Panel控件详解

比如,如果Panel控件停靠方式为Top,则只允许Panel控件向下增加大小,而不允许向上或其他方向增加大小。这样可以保持Panel控件位置不变,只增加高度或宽度。...作为滚动条容器,子控件过多或者超出Panel控件可见范围,Panel控件可以自动出现滚动条,使用户可以浏览和操作所有的子控件。...作为卡片式布局控件,可以设置多个Panel控件,每个Panel控件代表一张卡片,通过切换Panel控件显示和隐藏,实现卡片切换效果。...; //将滚动条停靠在Panel右侧panel1.Controls.Add(vScrollBar); //将滚动条添加到Panel中处理滚动事件,以便当用户滚动Panel,其内容会相应地移动。...例如,可以使用以下代码将Panel中控件向上向下滚动:private void vScrollBar1_Scroll(object sender, ScrollEventArgs e){ panel1

1.3K11

那些年你不能错过之【Linux操作】

命令,切换到高权限用户,例如 root「从权限高用户切换权限低用户,不需要输入密码,反之需要,需要返回原来用户,可以使用」 exit 四、常用命令 「pwd」显示当前工作目录绝对路径 「ls...操作 功能说明 空格键 向下一页 回车键 向下一行 q 立刻离开 more ,不再显示该文件内容 ctrl + F 向下滚动一屏 ctrl + B 返回上一屏 = 输出当前行号 :f 输出文件名和当前行号...操作 功能说明 空格键 向下一页 回车键 向下一行 q 立刻离开 less,不再显示该文件内容 pagedown 向下滚动一屏 pageup 向上滚动一屏 /字串 向下搜寻【字串】功能:n:向下查找...字串 向上搜寻【字串】功能:n:向下查找 ;N:向上查找 「echo」输出内容到控制台echo $PATH:输出当前环境变量 「head」用于显示文件开头部分内容,默认情况下 「head」 指令显示文件前...-f:全格式 常用:ps -ef | grep XXX来查找某个进程 「kill」若是某个进程执行一半需要停止,或是已消耗了很大系统资源,此时可以考虑停止该线程。

60820

【Linux系统编程】基础指令(二)

常用选项: -k 根据关键字搜索联机帮助 num 节号,表示只在第num章节找(注意这里没有-) -a 将所有章节都显示出来,比如 man printf 它从第一章开始搜索,找到就停止使用a...它允许用户以一页一页方式浏览文件,使大文件查看更加方便。 常用选项: -n 一次显示n行 在使用more命令,可以使用以下键盘快捷键进行操作: 空格键:向下滚动一页。...more -10 file1 enter键向下滚动一行: 空格键向下滚动一页: q键退出: 使用more命令要知道它只能向下,不能往回看 6.less指令(重要) ✨ less 工具也是对文件或其它输出进行分页显示工具...✨除此之外,在 less 里头可以拥有更多搜索功能,不止可以向下搜,也可以向上搜。...选项: -i 忽略搜索大小写 -N 显示每行行号 /字符串:向下搜索“字符串”功能 ?字符串:向上搜索“字符串”功能 n:重复前一个搜索(与 / 或 ?

12610

造一个 react-infinite-scroller 轮子

和 calculateOffset 监听器里判断是否 useWindow,如果 true,使用上面的 calculateOffset 计算 offset 至此,无限滚动最核心滚动已经实现了。...isReverse 除了向下无限滚动,我们还要考虑无限向上滚动情况。有人就会问了:一般都是无限向下呀,哪来无限向上?很简单,找微信聊天记录不就是无限向上滚动嘛。...首先,在 props 加一个 isReverse 用于指定向下还是向上无限滚动。 interface Props { ... isReverse?...,滚动位置不应该还停留在 scrollY = 0 位置,不然会一直加载更多,比如此时滚动到了顶部: 3 <- 到顶部了,开始加载 2 1 0 加载更多后 6 <- 不应该停留在这个位置,因为会再次触发无限滚动...,用户体验不友好 5 4 3 <- 应该停留在原始位置,用户向上滚动再次加载更多 2 1 0 为了达到这个效果,我们要记录上一次 scrollTop 和 scrollHeight,然后在组件更新时候更新

2.5K30

90行代码,15个元素实现无限滚动

前言 在本篇文章你将会学到: IntersectionObserver API 用法,以及如何兼容。 如何在React Hook中实现无限滚动如何正确渲染多达10000个元素列表。...无限下拉加载技术使用户在大量成块内容面前一直滚动查看。这种方法是在你向下滚动时候不断加载新内容。 当你使用滚动作为发现数据主要方法,它可能使你用户在网页上停留更长时间并提升用户参与度。...随着社交媒体流行,大量数据被用户消费。无线滚动提供了一个高效方法让用户浏览海量信息,而不必等待页面的预加载。 ? 如何构建一个体验良好无限滚动,是每个前端无论是项目或面试都会碰到一个课题。...采用relative/absolute 定位来确定滚动位置 追踪两个ref: top/bottom来决定向上/向下滚动渲染与否 切割数据列表,保留最多15个DOM元素。...$bottomElement = useRef(); const $topElement = useRef(); 正常无限向下滚动只需关注一个dom元素,但由于我们是固定15个dom元素渲染,需要判断向上向下滚动

2.9K20

文本编辑器及文本处理 文本编辑器介绍 常见Linux文本编辑器有: emacs nano gedit kedit vi vimLinux文本编辑器-emacs emacs是一款功能强大

执行一个非移动命令,命令会被执行到这块高亮区域上。Vim"文本对象"也能和移动命令一样用在这个模式中。 选择模式:这个模式和无模式编辑器行为比较相似(Windows标准文本控件方式)。...vim基础操作 - 修改文件 使用vim filename打开文件后,进入是普通模式。想要修改文件,可以按i键进入插入模式。进入插入模式,会在最下面提示当前模式是Insert。...more常用操作: Enter:默认向下滚动1行 Ctrl+F:向下滚动一屏 空格键:向下滚动一屏 Ctrl+B:向上滚动一屏 b:向上滚动一屏 =:输出当前行号 :f :输出文件名和当前行号 q...-s:有多个空行在一起只输出一个空行 -o :将less输出内容保存到指定文件 less常用操作: b:向上一页 d:向下半页 h:显示帮助界面 q:退出less u:向上半页...y:向上一行 空格键:向下一行 Enter:向下一页 上下键:向上/下一行 文件摘选 - head head用来显示文件开头至标准输出中,默认head命令可以显示文件前10行 命令格式:head

59340

华为认证欧拉openEuler-HCIA文本编辑器及文本处理

执行一个非移动命令,命令会被执行到这块高亮区域上。Vim"文本对象"也能和移动命令一样用在这个模式中。 选择模式:这个模式和无模式编辑器行为比较相似(Windows标准文本控件方式)。...vim基础操作 - 修改文件 使用vim filename打开文件后,进入是普通模式。想要修改文件,可以按i键进入插入模式。进入插入模式,会在最下面提示当前模式是Insert。...more常用操作: Enter:默认向下滚动1行 Ctrl+F:向下滚动一屏 空格键:向下滚动一屏 Ctrl+B:向上滚动一屏 b:向上滚动一屏 =:输出当前行号 :f :输出文件名和当前行号 q...-s:有多个空行在一起只输出一个空行 -o :将less输出内容保存到指定文件 less常用操作: b:向上一页 d:向下半页 h:显示帮助界面 q:退出less u:向上半页...y:向上一行 空格键:向下一行 Enter:向下一页 上下键:向上/下一行 文件摘选 - head head用来显示文件开头至标准输出中,默认head命令可以显示文件前10行 命令格式:head

31840

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

随着 Material Design 流行,卡片式 UI 已经成为现代 web 设计一部分。尤其是你在提供一个汇总归档信息界面卡片是提供详细信息入口。...我们用户体验设计团队最近重新设计基于卡片模式。下面对之前文章进行简单总结,你会明显得得到更多信息。然而,涉及到新闻,尤其是家庭和归档页面,会发现我们远远超过了使用这种模式。 ?...卡片式增加了滚动深度 在 Goal(最右边)上使用卡片鼓励用户向下滚动页面。这不是常见,因为每个卡片相比于 Voetbalzone(最左边)占用高出38%高度。...一是在折叠,二是向下滚动到“最好”位置 - 最可能是新闻标题地方。...Material Design 建议是列表是“可快速扫描”,适合显示类似的重复内容。 当用户不直接比较图像或文本,不推荐使用卡片式。

3.1K70

Linux文本处理工具--less

文件显示结束后,自动离开 -f 强制打开特殊文件,例如外围设备代号、目录和二进制文件 -g 只标志最后搜索关键词 -i 忽略搜索大小写 -m 显示类似more命令百分比 -N 显示每行行号...字符串:向上搜索“字符串”功能 n:重复前一个搜索,如果是/的话,就是继续向下搜索,如果是?的话,就向上搜索 N:反向重复前一个搜索,如果是/的话,就是继续向上搜索,如果是?...的话,就向下搜索 &字符串:仅仅显示匹配上行undefined翻页b 向上一页 d 向下半页 u 向上滚动半页 y 向上滚动一行 空格键 向下一行 回车键 向下一页 pagedown:...向下翻动一页 pageup: 向上翻动一页 Ctrl + F:向下翻页 Ctrl + B :向上翻页 Ctrl + D :向下移动半屏 Ctrl + U : 向上移动半屏 G:移动到最后一行 g:......可以打开多个文件 :e:已经运行了less命令,想要打开另外一个文件,可以使用:e进行打开,支持tab补全,支持glob通配 vim也有相同两种方式,已经运行vim情况下需要使用:open

2.5K60

【IOS开发基础系列】UIScrollView专题

ScrollView本身不能绘制,除非显示水平和竖直指示器。滚动视图必须知道内容视图大小,以便于知道什么时候停止;一般而言,滚动出内容边界,它就返回了。         ...某些对象是用来管理内容显示如何绘制,这些对象应该是管理如何平铺显示内容子视图,以便于没有子视图可以超过屏幕尺寸。就是当用户滚动,这些对象应该恰当增加或者移除子视图。          ...一个滚动视图也可以控制一个视图缩放和平铺。当用户做捏合手势滚动视图调整偏移量和视图比例。手势结束时候,管理视图内容显示对象,就应该恰当升级子视图显示。...如果先前大就是向下滚动,否则就是向上滚动。         找到了向下滚动了,就该判断是否子视图已经离开了可视范围。方法就是判断当前offset和视图位置进行比较。...    当值是 YES 时候,用户触碰后,然后在一定时间内没有移动,scrollView 发送 tracking events,然后用户移动手指足够长度触发滚动事件,这个时候,scrollView

41330

linux指令大全(归类整理)

touch 文件路径1 文件路径2 7 cp指令 拷贝文件到目标路径 cp [选项] 源路径 目标路径 cp 源路径 目标路径 拷贝单个文件 cp -r 源路径 目标路径 拷贝文件夹 补充 拷贝发现相同文件...,以全屏方式按页显示文本内容 more指令中内置了很多快捷键,用起来很方便 more 文件路径 快捷键 空格 向下一页 Enter 向下一行 q 立即离开 Ctrl+F 向下滚动一屏...Ctrl+B 向上滚动一屏 = 显示当前行号 :f 输出文件名和当前行号 12 less指令 比more更加强大,功能比more更过,这里只介绍部分 less 文件路径 快捷键 空格...向下一页 pagedown 向下一页 pageup 向上一页 /字符串 向下查找[字符串],n下一个,N上一个 ?...选项: -name 文件名 按文件名查找 -user 用户名 查找属于该用户所有文件 -size 按文件大小查找 +20M -20M 20M 20K 4 grep 指令 和 管道符号

96020

10w单元格滚动卡顿如何解决?腾讯文档7个秘笈

滚动时候,会计算出需要销毁的卡片和需要新增的卡片然后开始销毁前面的节点,重新创建新节点,进行增量渲染。对应上面的第 2、3 步,但此时只会收集增量 Painter。...比如腾讯文档团队 Sheet 和 Word 都有离屏渲染,思路都是在滚动时候,通过 drawImage 来复用前面已经绘制部分,然后再绘制增量部分,这样可以减少大量文本绘制。...各位开发者可以看到最终优化效果,绘制耗时只有 2 ms。 但正如前面说,离屏渲染只是针对已经渲染好的卡片进行。那如果滚动时候,出现了新的卡片怎么办?这部分渲染依然会很耗时。...这些复杂计算本身会消耗一些时间,其中通过二分查找也会大量调用 measureText 方法。那要怎么处理呢?看板由于需要记录用户上次打开滚动位置,再次打开时候需要跳转过去。...为了避免滚动时候,再去实时计算当前应该新增或减少哪些卡片,会在最开始时候一次性计算好所有的卡片宽高。 卡片宽度涉及到文本、图片等宽高,也就是说最开始已经处理过文本计算,那这部分缓存起来不就好了?

4.5K51

linux笔记02

73 2023-02-26 09:31:54.641376953 +0800 1.txt 3.cp 源文件 目标文件 复制文件 -a 保留源文件属性 -i 目标文件已经存在,会询问是否覆盖...-p 连同文件属性(权限,用户,时间)一起复制过去 -r 递归复制,用于目录复制操作 4.cd /temp 切换工作目录到/temp 5.mkdir testing 建立新目录 mkdir...空格 向后翻页 enter 向下一行 /字符串 向下查找字符串 :f显示文件名和目前行数 q 离开 b 往回翻页 16.less 与more类似 /字符串:向下搜索"字符串"功能 ?...有关) b 向上一页 d 向后半页 h 显示帮助界面 Q 退出less 命令 u 向前滚动半页 y 向前滚动一行 空格键 滚动一页 回车键 滚动一行 [pagedown]: 向下翻动一页 [pageup...s 和 u 相反,删除文件或目录,会被彻底删除(直接从硬盘上删除,然后用 0 填充所占用区域),不可恢复。

46820
领券