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

开发 | 餐饮小程序必备!教你轻松做出像「饿了么」一样的点餐界面

作者:zyh2668 知晓程序注: 许多购物、外卖小程序,都会做「分栏」设计,即在左侧展示商品分类、右侧展示分类下的具体商品。 如何将分类栏固定在屏幕上呢?使用 sitcky 特性,或许是个方案。...今天,知晓程序就来为大家讲解,如何在小程序中使用 sticky 的方法,将页面元素固定在屏幕上。 关注「知晓程序」微信公众号,回复「开发」,获取小程序优化秘籍。 什么是 sticky 效果?...简单地说,sticky 就是标题栏的「」效果,向下滑动时跟着列表走、向上滑动到顶部时将会固定在顶部。 ?...顶部的蓝色条幅,就是 sticky 后的效果 如果不考虑不同浏览器兼容性,CSS 3 就有一个 position: sticky 属性,就能实现这种效果。 ?...在小程序里,如何实现 sticky 效果? 在小程序里实现 sticky 效果,我们需要利用小程序 scroll-view 组件里的 scroll-into-view 属性。

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

Mac电脑必备屏幕截图软件,Snagit

因此,您可以在一个程序中轻松创建高质量的图像和视频。 2.最后,屏幕捕获软件可以完成您所做的一切 快速解释一个过程如果您正在努力清楚地沟通,Snagit可以让您轻松了解您的观点。...使用箭头,形状和标注评论您的屏幕截图。或者通过工作流程引导人们,并通过快速屏幕录制回答问题。 在文档中添加视觉效果如果您的所有文档都可以快速创建,更新易于使用,并且用户可以轻松遵循该怎么办?...只需一个热键或点击即可抓取任何网页或应用程序或捕获视频。 滚动屏幕捕获获取整页滚动屏幕截图。...Snagit的屏幕捕获工具可以轻松抓取垂直和水平卷轴,无限滚动网页,长聊天消息以及介于两者之间的所有内容。 抓住文字从屏幕截图或文件中提取文本,然后快速将其粘贴到另一个文档中进行编辑。...录制iOS屏幕 TechSmith Capture应用程序让您只需轻点几下即可录制iOS屏幕,并立即将其分享回Snagit进行修剪。 8.图像编辑 注释屏幕 抓取使用专业标记工具注释屏幕抓取。

1.9K40

平面设计师必备的AI快捷键

一、原位粘贴技巧 CTRL+C 复制 CTRL+F 原位贴到前面 CTRL+B 原位贴到后面 二、页面切换技巧 在开多个AI文档的情况下。...2、默认的AICS的启动画面是使用“AI_Splash.PNG”文件,所以万一这个文件不在的话,启动AICS的时候将省掉启动画面的显示,直接进入程序欢迎画面。...】 渐变填色工具 【G】 颜色取样器 【I】 油漆桶工具 【K】 剪刀、餐刀工具 【C】 视图平移、页面、尺寸工具 【H】 放大镜工具 【Z】 默认前景色和背景色 【D】 切换填充和描边 【X】 标准屏幕模式...【Ctrl】+【O】 关闭当前图像 【Ctrl】+【W】 保存当前图像 【Ctrl】+【S】 另存为… 【Ctrl】+【Shift】+【S】 存储副本 【Ctrl】+【Alt】+【S】 页面设置 【Ctrl...【Ctrl】+【V】或【F4】 将剪贴板的内容到最前面 【Ctrl】+【F】 将剪贴板的内容到最后面 【Ctrl】+【B】 删除所选对象 【DEL】 选取全部对象 【Ctrl】+【A】 取消选择

2.5K20

Material Design — App bars: topApp bars: top

---- 用法 Top app bar 提供与当前屏幕相关的内容和操作。 可用于品牌,屏幕 title,导航和操作。...原则 ·始终保持 Top app bar 出现在 app 中每个屏幕顶部,并且可以在滚动时消失。 ·引导 Top app bars 提供了一种可靠的方式来引导用户浏览 app。...Bars 中的图像 Bars 可以包含图像。 由于 Prominent top app bars 提供了更多的空间,因此推荐在其上使用图像。...不要使用让 top app bar 文字和图标难以辨认的图像。 ? ? Navigation icon (optional) Navigation icon 是可选的。...当向上滚动时,使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。 他们不应该返回到 prominent 模式,直到用户滚动回页面的顶部

2.2K60

CSS粘性定位 - 它的真正工作原理!

当它正常工作时,元素会""在一定位置,但在滚动的其他部分,它又会停止""住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题的根本原因,所以决定深入研究sticky定位。...Stick 探索 在尝试使用 sticky 定位的过程中,我很快发现,当一个具有sticky定位样式的元素被包裹起来,并且它是包裹元素内唯一的元素时,这个被定义为sticky定位的元素并不会""住。...Absolute 定位 - 在粘附区域的末尾,元素停止并堆叠在另一个元素的顶部,就像绝对定位元素在 position: relative 容器内的行为一样。 贴在底部?...在大多数情况下,使用 position: sticky 以将元素固定在顶部,类似于这样: .component{ position: sticky; top: 0; } 这正是它被创建出来的原因...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器的末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部的元素。

24320

6 个用于写书的开源工具

它是关于安装和使用 FreeDOS、关于我最喜欢的 DOS 程序,以及 DOS 命令行和 DOS 批处理编程的快速参考指南的集合。在一位出色的专业编辑的帮助下,我在过去的几个月里一直在编写这本书。...图形样式让我可以将某些样式应用于截图和其他图像。页面样式允许我轻松修改页面的布局和外观。 GIMP 我的书包括很多 DOS 程序截图、网站截图和 FreeDOS 的 logo。...在准备电子书的 PDF 版本时,我想在页面顶部放置一个简单的蓝色横幅,角落里有 FreeDOS 的 logo。...实验后,我发现在 Inkscape 中创建一个我想要的横幅 SVG 图案更容易,然后我将其粘贴到页眉中。...QEMU 控制台允许你以 PPM 格式转储屏幕,这非常适合抓取截图来包含在书中。 当然,我不得不提到在 Linux 上运行 GNOME。我使用 Linux 的 Fedora 发行版。

1.5K10

16款值得一用的iPhone线框图模板 (PSD & Sketch)

模板中标注了顶部导航栏、底部导航栏以及键盘高度的位置。无论是打印或复制粘贴到原型工具中使用都非常方便。可以说设计师非常贴心了。...价格:免费 这套iPhone 6的线框图提供了4种不同的网格背景,适配iPhone 6和iPhone 6 plus两种机型尺寸,分别有横向和纵向的模板,满足各种屏幕需求。...不同于上面所有的模板,这款线框图只有屏幕线框,没有手机外形线框,更方便线框手绘创作。...这款iPhone线框模板是原型设计工具Mockplus中自带的线框模板,添加了顶部状态栏和底部home按钮。预览时更加形象化。...在Sketch文件中,包含四种模板: 带引导的纯线框 带引导和设备轮廓 带导向和设备遮罩 带引导和设备轮廓 同样也可以用B4和A4纸张尺寸打印,用于素描。

1.9K20

工作经验|如何在工作中优雅的截图

Snipaste是一款轻巧、易于使用的截图工具,它可以快速截取屏幕上的任何区域,并提供了多种标注和编辑功能,并将截图粘贴到任何应用程序中。...自动识别:Snipaste能够自动识别并提取屏幕上的文字和图像,方便用户进行搜索和识别。快速访问:Snipaste支持将常用应用程序或网页添加到快速访问栏,方便用户快速打开和截取。...3.4 贴图功能在完成截图编辑后,用户可以将截图粘贴到任何应用程序中。只需要在需要粘贴的位置按下快捷键Ctrl+V即可将截图粘贴到该位置。...Windows:Ctrl + VMacOS:command + V3.5 贴到屏幕上这个功能我感觉很不错,尤其是在作为重要信息时突出显示到最上层。...快捷键如下:MacOS:command + T4 总结Snipaste是一款非常实用的截图工具,它不仅具有简洁、快速和灵活的特点,还提供了许多实用的功能,如图像编辑、贴图功能、自动识别和快速访问等。

22840

TextMan Mac(OCR文本识别)激活版

网站、PDF、图像中的文字不能复制怎么办?试试这款苹果OCR文本识别工具TextMan,只需截取屏幕截图即可识别网站、PDF、图像等内容,然后在剪贴板中找到所有已识别的文本即可粘贴到任何地方。...TextMan Mac图片功能介绍选择屏幕区域通过绘制一个矩形来选择屏幕上的任何文本以启动 OCR 检测*。将它用于网站、PDF 和图像。...扫描文本可以是英文、法文、意大利文、德文、西班牙文、葡萄牙文和中文(简体和繁体)粘贴到任何地方在剪贴板中查找所有检测到的文本,准备将其粘贴到每个文本字段中。...再也不会因网站、PDF、图像或系统用户界面上的不可选择文本而烦恼。只需以与截取屏幕截图相同的方式选择屏幕区域,然后在剪贴板中找到所有已识别的文本即可粘贴到任何地方。

1.1K20

OCR文本识别TextMan for Mac激活版

OCR文本识别工具TextMan Mac版只需截取屏幕截图即可识别网站、PDF、图像等内容,然后在剪贴板中找到所有已识别的文本即可粘贴到任何地方。...id=MjU2NjEmXyYyNy4xODYuMTI0LjQ%3D功能介绍选择屏幕区域通过绘制一个矩形来选择屏幕上的任何文本以启动 OCR 检测*。将它用于网站、PDF 和图像。...扫描文本可以是英文、法文、意大利文、德文、西班牙文、葡萄牙文和中文(简体和繁体)粘贴到任何地方在剪贴板中查找所有检测到的文本,准备将其粘贴到每个文本字段中。...再也不会因网站、PDF、图像或系统用户界面上的不可选择文本而烦恼。只需以与截取屏幕截图相同的方式选择屏幕区域,然后在剪贴板中找到所有已识别的文本即可粘贴到任何地方。

1.3K10

Vim基础用法,最常用、最实用的命令介绍(保姆级教程)

配置文件设置set number (设置行号)set nocompatible (设置不兼容vi模式,不设置会导致许多vim特性被禁用)set clipboard=unnamed (设置普通的复制的内容和...复制当前游标对应的字母)y$ (复制当前字符到行尾)y^ (复制当前字符到行首 )yG (从当前位置复制到文件结尾)yf+(任意字符), (从当前字符复制到任意字符)yy (复制当前一整行)p (粘贴)p (粘贴到游标所在行的下方...)shift + p 或者叫大写的P (粘贴到游标所在行的上方)d (剪切/删除)vd/x (删除当前游标所在的字符)dw (删除游标右边的单词)db (删除游标左边的单词)d$ (删除从当前游标到行尾...选中当前游标位置的整个单词)viw + d / y (选中之后可以删除、复制)跳转w (向右跳转一个单词)b (向左跳转一个单词)^ (跳到行首的非空字符)0 (跳到行首的第一个字符)$ (跳到行尾)gg (跳到文件最顶部...)shift + g 或者叫 G (跳到文件最底部),引申的命令:ggvG (全选)-解释:选中最顶部到最底部,即全选nG (n表示行号,例:16G,表示跳到16行)50% (跳到文件的中间位置)n%

1.2K00

TextMan mac(ocr文字识别工具)1.4.1

想要快速的从图片提取文字,推荐ocr文字识别工具——TextMan,小巧简便,只需以和截图相同的方式选择屏幕区域,然后在剪贴板中找到所有已识别的文本即可粘贴到任何地方。 ...图片TextMan软件介绍再也不会因网站、PDF、图像或系统用户界面上无法选择的文本而烦恼。只需以与截取屏幕截图相同的方式选择屏幕区域,然后在剪贴板中找到所有已识别的文本即可粘贴到任何地方。 ...TextMan 下载功能特色选择屏幕区域通过绘制一个矩形来选择屏幕上的任何文本以启动 OCR 检测*。将它用于网站、PDF 和图像。...*扫描文本可以是英文、法文、意大利文、德文、西班牙文、葡萄牙文和中文(简体和繁体)随处粘贴在剪贴板中查找所有检测到的文本,准备将其粘贴到每个文本字段中。

6.2K10

web前端必备英语词汇都在这儿了,客官你了解多少?

在中国从事程序开发工作的人,似乎英语并不会影响到你找到满意的工作,升职与加薪。但程序毕竟是歪果人创造的,都是由英文和数字表达式所构成的,所以掌握开发过程中常用的英语词汇还是非常重要的。...appCodeName 程序代号 appVersion 程序版本 appAgent 程序代理 abs 取绝对值 array 数组 B: back 超过范围的三次方缓动 bounce 指数衰减的反弹缓动...整个宽度 open 打开新页面 onscroll 窗口滚动事件 onresize 窗口大小监听事件 onload 图片加载事件 offsetLeft 获取元素距离左侧的距离 offsetTop 获取元素距离顶部的距离...srcElement 源对象,事件源 split 分割 substr 截取字符串 substring 截取字符串 sqrt 取开方 status 状态 sort 排序 slice 切片,划分 splice 铰接,接...T: textContent 文本添加文字 table 表格 title 标题 td 单元格的HTML 标记 top 顶部 toLowerCase 转换为小写

3K20

在本地安装 Matomo

例如使用Filezilla FTP 客户端,您可以在顶部菜单传输 > 传输类型 > 二进制中启用二进制模式传输。...如果一切都正确上传,您应该会看到 Matomo 安装欢迎屏幕。(如果您没有看到欢迎屏幕,请同时检查您的 Web 服务器(如 Apache、Nginx 或 IIS)是否已配置并正常工作)。...我们建议您将此代码粘贴到紧靠您的结束标记之前(或粘贴到包含在所有页面顶部的通用标头文件中)。...Matomo 还可以集成到Android 和 iOS 应用程序、GTM(谷歌标签管理器)、Ionic 移动应用程序等中。 否则,您将需要手动插入跟踪标签。 复制跟踪标签后,单击下一步 » 恭喜!...如果您没有收到任何数据,请确保您已将Matomo Javascript 代码复制并粘贴到您的网站页面。

2.7K20

灵活运用CSS开发技巧

作为程序猿的我们,写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解,让人舒服自然,同时也让自己成就感满满(哈哈,这个才是重点)。...在线演示 使用object-fit规定图像尺寸 要点:通过object-fit使图像脱离background-size的约束,使用来标记图像背景尺寸 场景:图片尺寸自适应 兼容:object-fit 代码...在线演示 使用transform描绘1px边框 要点:分辨率比较低的屏幕下显示1px的边框会显得模糊,通过::before或::after和transform模拟细腻的1px边框 场景:容器1px边框...在线演示 使用box-shadow裁剪图像 要点:通过box-shadow模拟蒙层实现中间镂空 场景:图片裁剪、新手引导、背景镂空、投射定位 兼容:box-shadow 代码:在线演示 ?...在线演示 球 要点:相交效果的双球回弹运动 场景:动画 兼容:filter、animation 代码:在线演示 ?

4.5K20

用户体验之如何设计一个完美的新手引导流程?(附带案例)

如何设计一个完美的新手引导流程?设计之前,不妨想想你最近一次下载新应用程序或登陆新网站的场景。你知道该怎么操作吗?它们的新手引导流程是否帮助你迅速完成交互了呢?...新手引导流程是将新用户融入到产品中的设计,优质的引导设计可以让访客与你的网站/应用程序/数字产品进行深入交互。接下来小编将介绍如何设计这样一个优质的引导流程,并附带一些例子帮助大家理解。...上面的Milanote在网站主页上就做得很好,在主界面有一个电脑屏幕显示正在使用的应用程序。无论访客是短暂停留还是循环播放,这个简短的视频都能向网站访客展示如何与这个网站及相关应用程序进行交互。...页面显示多屏幕教程或信息的进度栏,可以包含跳过或返回的按钮。 同时,不要忘记关注用户的利益。怎么才能让你的网站或应用程序变得有趣? 为什么访客要完成注册登录流程并继续体验?...保持流程简单流畅,使用优质的图像和有趣的文案,并奖励用户完成登录任务。 注册登录流程中一定要包括你让访客与你的网站保持交互的所有操作。

1.6K10
领券