文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Material Design — 底部导航（Bottom Navigation）

超过6个就不要放在底部导航里了，太挤了 底部导航和标签 当组合底部导航和tabs时要注意，因为这样的组合可能会因为用户不知道二者的优先级而在导航时引起混乱。...应按下列要求制作每一个动作（目前并不适用，因为图标无法100%传递标签的内容）： ·当页面处于焦点时，显示页面的icon和标签； ·当只有三个动作时，始终显示icon和文本标签； ·如果有四个或五个动作...底部导航栏可以从一个主题中的n级页面移动到另一个主题的一级页面。当用户去往下级页面时要保持底部导航可用，可通过持续展示，或者通过滚动隐藏和显示。...底部导航栏不应用于： ·专注于单一任务的观点，如电子邮件“撰写”页面。 ·包含用户首选项或设置的页面 在Android上，后退按钮不在底部导航栏视图之间导航。...滚动 底部导航栏滚动时可以动态地出现和消失： ·向下滚动隐藏底部导航栏 ·向上滚动显示 手势 在内容区域上使用左右滑动手势不会在一级页面之间切换。

5.4K91

waypoint_使用jQuery Waypoint创建粘性导航标题

waypoint 在本教程中，我们将创建一个导航栏，当您向下滚动时，它会陪伴您-我们还将在混合中添加一两个two头以对其进行修饰。...最重要的是，您将熟悉jQuery Waypoints插件的基础知识，该插件将提供高级功能：当用户向下滚动时，导航栏将停留在视口的顶部，并进行更改以指示当前部分。...当用户向下滚动时，表达式direction==='down'计算结果为true ，因此我们的导航栏将接收到sticky类，并停留在视口的顶部。...用户再次向上滚动时，该类将从导航栏中删除，并返回其位置。 立即尝试。 酷吧？...由于我们没有离开渐进增强的轨道，因此没有理由不坚持使用jQuery的强大功能。 ---- 步骤6：突出显示和平滑滚动 随着读者逐步浏览页面的不同部分，您可能需要更改突出显示的项目。

5.4K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    导航栏滚动吸顶并自动高亮和点击跳转锚点

    2021-01-16 07:37:33 在阿里云的云市场页面上有一个效果，就是api导航栏当滚动条滚动到其所在位置时，自动吸顶，当滚动到下方所在导航栏指定的介绍时，自动高亮其导航栏。...那么需要我们自己手动来实现以下，具体实现思路就是增加滚动条监听事件，当滚动到导航栏指定内容区域时，给其导航栏增加高亮样式，点击导航栏时，计算好滚动条的滚动距离，让其滚动过去即可。...} else if(nav_contentReact.y > 60 ){ setFixNav(false); //当脱离其显示范围时，导航栏无需高亮...isToTop = false;//点击锚点时滚动条是向上还是向下 //导航栏点击事件 function navClick(id){ let groupList =...let outerItemReact = selectItem.getBoundingClientRect(); //判断导航内容是在可视区域上方还是下方，来决定滚动条是应该向上滚动还是向下滚动

    11.8K50

    CoordinateLayout+AppbarLayout+Tablayout 原理 解析和 常用效果

    支持 scrollFlags 属性，控制其在滚动时的行为。 内部使用 NestedScrollView 或 RecyclerView 触发滚动事件。 3....该 View 会随着内容滚动而一起滚动（必须有此 flag 才能触发折叠） enterAlways 向下滚动时，立即显示该 View（即使内容未完全滚动） exitUntilCollapsed 滚动出屏幕...，但保留最小高度（常用于折叠工具栏） enterAlwaysCollapsed 配合 enterAlways，下拉时先以最小高度显示，再展开 snap 滚动停止时，自动“吸附”到展开或折叠状态 注意...用户点击标签时，TabLayout 调用 ViewPager.setCurrentItem() 切换页面。 2....反向滚动（用户向下滚动）时，过程相反，AppBarLayout 会滑回原位。

    51810

    HarmonyOS-UIAbitity-Navigation——【坚果派-红目香薰】

    接口 Navigation() 创建可以根据属性设置，自动展示导航栏、标题、工具栏的组件。 属性 名称 参数类型 描述 title string 页面标题。...titleMode NavigationTitleMode 页面标题栏显示模式。 默认值：NavigationTitleMode.Free toolBar objec 设置工具栏内容。...items: 工具栏所有项。 hideToolBar boolean 设置隐藏/显示工具栏： 默认值：false true: 隐藏工具栏。 false: 显示工具栏。...NavigationTitleMode枚举说明 名称 描述 Free 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。...时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。

    51910

    m001mac初级篇之常用快捷键

    标签和网页导航快捷键 8 个 切换到下一个标签页 – Control+Tab 　　切换到上一个标签页 – Control+Shift+Tab 　　向下滚动一屏 – 空格 　　向上滚动一屏 – Shift...查看页面源代码 – Command+Option+U 　　禁止弹出窗口 – Command+Shift+K 查找并在找到的项目中导航的快捷键 3 个 　　在页面上查找文字 – Command+F 　　向下浏览找到的项目...– 回车 　　向上浏览找到的项目 – Shift+回车 工具栏、历史记录和阅读列表的快捷键 8 个 　　隐藏或显示工具栏 – Command+i 　　隐藏或显示书签栏 – Command+Shift+...Delete，也就是向后删除 fn-上箭头：向上滚动一页（Page Up） fn-下箭头：向下滚动一页（Page Down） fn-左箭头：滚动至文稿开头（Home） fn-右箭头：滚动至文稿末尾（End...Cmd-Shift-回车 在新窗口或者标签打开搜索结果 Safari快捷键：菜单快捷键 Cmd-A 全选 Cmd-B 显示/隐藏收藏栏 Cmd-D 添加书签 Cmd-E 使用所选进行查找 Cmd-F

    2.2K80

    最新iOS设计规范三｜3大界面要素：栏(Bars)

    在拆分视图中，导航栏可能会显示在拆分视图的单个窗格中。导航栏是半透明的，也可以添加背景色，并且必要时可以设置为隐藏。 ? 某些情况下可暂时隐藏导航栏，以提供更沉浸的体验。...例如，当人们查看全屏照片时，“照片”会隐藏导航栏和其他界面元素。如果你的APP也用到了这个功能，切记要让用户使用简单的手势（如点按）来恢复导航栏。 导航栏标题 在导航栏中显示当前视图的标题。...搜索栏可以单独显示，也可以显示在导航栏或内容视图中。当显示在导航栏中时，可以将搜索栏固定在导航栏中，以便始终可以调用。也可以将其折叠，当用户向上滑动时展开显示。...通常，在iPhone上使用三到五个标签；如果需要，在iPad上可以接受更多一些。 当人们导航到您应用中的其他区域时，请不要隐藏标签栏。标签栏可为您的应用启用全局导航，因此它在任何地方都应保持可见。...例如：在Safari中，当你开始滚动页面时，工具栏会自动隐藏，因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。当弹出键盘时，工具栏也会被隐藏。 ?

    14.8K10

    Framer 使用滚动变体创建动画

    您可以使用“滚动变体”使导航栏在用户向下滚动页面时更改其外观，例如更改其背景颜色或调整元素的位置。或者在向下滚动页面时突出显示活动部分的侧边栏。...单击组件, 点击左侧属性栏的Effect ==> 点击+号 添加scroll variant 编辑 给每个页面加入了Scroll Section Name(这也在左侧属性面板,往下面划划就看到了).这方便我们用来控制当...当黑色部分在浏览器视口中,导航栏使用默认的组件 当白色部分在浏览器视口中,导航栏使用黑色背景的导航栏组件 当黄色部分在浏览器视口中,导航栏使用黄色背景的导航栏组件 效果: 我们可以看到 当滚动不到不同部分的时候...,导航栏就会使用不同的组件....具体步骤: 第一步: 我们创建一个组件, 引入3个图标(Framer内置了,可以在import里面找到). 第二步: 引入到页面上,使用固定定位,定位在指定位置.

    1.7K10

    vue+element锚点跳转+自动感应导航栏

    最近来个需求，要做一个页面，每个模块都是百分百全屏且右侧有个导航栏能自动感应在哪个模块,点击也能直接跳转到该锚点。 其实难点也就那几个，慢慢捋一下就好，话不多说上代码！！...2、关于翻页自动感应 思路 前面说了，我们是使用index来控导航栏中哪个模块高亮的 当鼠标往下滚动时让整个页面往下滚动整个页面的高度且index加一反之减一 具体实现 <div @mousewheel...} if (e.wheelDelta 0) { // 当鼠标向下滚动时触发 } } } 在最外层容器中加入这个鼠标触发事件 然后就可以监听鼠标滚轮向上还是向下了...呃…想详细了解的朋友自行百度哈，这里不过多赘述 当鼠标向下滚动时我们使用 window.scrollTo(x,y); 来让页面进行滚动且让index加一反则减一 这样一来就能实现导航栏的自动感应了 但是要注重几个细节问题...第一、当你到达了顶部或者底部时需要重置你的index 第二、你加的高度变量要重置 第三、滚到底部或者顶部时需要取消终止滚动函数 以上就是自动感应导航栏的实现了，如果有不明白的朋友可以评论或者私信讨论

    2.5K50

    Material Design — App bars: bottomApp bars: bottom

    滚动 滚动时， bottom app bar 可以出现或消失： 向下滚动隐藏 bottom app bar， 如果有FAB，则它会脱离 bar 并保留在屏幕上。...向上滚动显示 bottom app bar，如果有FAB，则重新附着 FAB。 Bottom app bar 可以改变其边缘的形状，例如凹口以容纳FAB。...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏前打开，并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer，但该 bar 本身不包含任何导航操作（例如向上导航至主屏幕或一个关闭图标...不要将导航操作置于bottom app bar中，因为它们可以被临时表面覆盖 与 top app bar 同时使用 当与 bottom app bar 一起使用时，top app bars 可以提供向上导航和其他操作

    3.2K80

    UIScrollView进阶技巧

    隐藏按钮.gif ? 隐藏底栏.gif 先看第一个，是个挺常用的效果。...列表上面是三个栏目按钮和轮播图片，向上滚动时，按钮和图片一起向上，按钮周边区域颜色渐变，然后在到指定位置时（这里是盖住导航栏之后）按钮停住不动，周边颜色也完全变成导航栏的颜色，列表数据还可以继续滚动。...menuBtnH是栏目按钮的高，barHeight是导航栏的高。我要做的效果是栏目按钮得盖住导航栏，所以按钮要在-offsetY = menuBtnH - barHeight的时候才会停下。...第三个效果就不是TableView了，而是个WebView，效果是向上滑动时隐藏底栏，向下时显示底栏。...重点是判断WebView的滑动方向： extension WebViewCtrl: UIScrollViewDelegate { //判断当前是向上还是向下滑动 func scrollViewDidScroll

    1.5K40

    【iOS】仿知乎日报，RxSwift-Part1-首页搭建

    然后tabbarVC添加两个控制器，一个为首页，一个为其他话题，然后隐藏tabbar，通过侧栏点击切换。如下图所示： ? 整体框架 首页搭建 1、导航栏的设置 先来看看效果图： ?...首页导航栏效果演示.gif 刚开始导航栏的颜色是透明的，随着tableView向上滚动时，导航栏主键显示颜色。...那么只要显示第一张或最后一张时，马上修改collectView的contentOffset即可瞒天过海，具体实现参考项目代码吧~ 2.2、向下拖拽时，图片会放大 其实也是监听tableView的滚动，改变轮播图中图片的高度即可...其实我也这么觉得，初入RxSwift，不打算封装太多层，怕把自己绕进去了，所以就先这样写了~ 4、设置导航栏的titile日期 效果说明：随着列表的滚动，sectionHeader的日期会显示在导航栏上...，滚动到最新日期时，导航栏又显示回今日要闻。

    2.9K10

    iOS 9人机界面指南(四)：UI元素（上） - 腾讯ISUX

    以下有一些方法可以让滚动的内容能正常显示在状态 栏后面： 使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景，同时能确保内容视图不会出现在状态栏后面。...始终隐藏状态栏意味着用户必须退出你的应用才能知道现在的时间，或者了解当前环境下是否有Wi-Fi连接。 在用户全屏观看媒体时，考虑隐藏状态栏以及所有页面UI。...当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，导航栏可以隐藏。...工具栏： 是半透明的 在iPhone上，工具栏始终位于屏幕底部，而在iPad上则有可能出现在顶部 当键盘被唤起、用户使用了手势、或者当前视图变为竖屏的情况下，工具栏可以隐藏。...大多数搜索栏都会提供清除按钮，方便用户一键清空输入内容。 ? 一旦用户在文本框中输入内容，清除按钮就会出现，用户可以用它来一键清空输入内容；而当搜索框中没有任何文本内容时，清空按钮将被隐藏。

    15.8K51

    【交互探讨】无限滚动还是分页展示，这是个问题！

    就像没有简单的方法在无限滚动的“旧”段和“新”段之间导航一样，鉴于所有的条目都落入同一个条目流中， 一旦你向上和向下滚动一些条目，除非我们仔细地浏览最后几个项目几次，否则就很难迅速区分我们已经看到的和我们还没有看到的条目...在一些实际案例中，当用户开始向下滚动时，先是会自动出现更多项目，一旦浏览内容数量达到某个阈值时，就会出现“加载更多”按钮。 Crutchfield 上使用的“加载更多”模式。...就像我们习惯于使用粘性头部一样，我们可以集成一个页脚显示：一个小助手，它会保持在右下角的栏中，并在需要时显示页脚，而页面的其余部分使用无限滚动。...页脚显示，有一个按钮在需要时显示和隐藏页脚 结合分页和无限滚动 当用户向下滚动页面并加载项目时，我们可以将其作为动态分页呈现给用户（参见 Pepper.pl）。...滚动时，页面的 URL 会发生变化，并且页码会在吸底底部栏中更新。用户还可以在分页下拉菜单中导航到特定页面。当然，折叠面板也可以在点击时打开页脚。

    4.7K20

    【HarmonyOS NEXT】页面沉浸式效果开发

    关键词：沉浸式、安全区域、通知栏、导航栏 在移动应用开发中，应用在默认情况下窗口背景绘制范围是全屏，但UI元素被限制在安全区内（自动避开状态栏和导航栏）进行布局，来避免界面元素被状态栏和导航条遮盖（即状态栏与导航栏区域为非安全区...当然你也可以按需利用 api 直接隐藏导航栏与通知栏。​...保存状态栏与导航栏高度使用 getWindowAvoidArea 获取通知栏与导航栏高度并利用 AppStorage 保存，供后续页面避开该区域使用。...避让状态栏或导航栏页面使用 StorageProp 获取导航栏与通知栏高度并进行避让，并自行调节布局达到滚动时是否与通知栏或导航栏重叠效果场景1 滚动容器不重叠非安全区给滚动控件的父控件设置内边距即可，...编辑​编辑场景2 滚动容器重叠非安全区给滚动控件设置内边距即可，页面滚动时即可滚动至非安全区。​

    59710

    商品添加到购物车动画getBoundingClientRect获取元素位置

    联动菜单 1.1 用户点击左侧导航栏会跳转到相应的内容 这个很简单，给导航栏的每一个元素加一个点击事件，其实也可以通过a标签的锚点来实现 导航栏向上滚动相应距离，一个li的高度为54px this....1.2 用户滑动右侧的内容左侧的导航栏会响应式改变 右侧内容监听一个scroll事件，当触发滑动事件的时候获取粘性定位在顶部的标题，根据标题使导航栏定位到相应的li var obj = element.getBoundingClientRect...动画实现思路：用户点击添加时将一个小球的位置设置为被点击元素的位置，且获取目的地位置（购物车位置），当小球抛出时使其运动方式按照贝塞尔曲线过渡。...上面的DOM操作可以改成使用vue的动画组件 transition 进行优化，感觉会更好，我在项目中使用了transition组件进行优化，代码更加简洁。

    2.3K20

    如何使用 CSS 设置和自定义水平和垂直滚动条

    您可以设计您的侧边栏以显示可滚动的导航项目列表。...在本节中，我们将按照以下步骤创建一个可滚动的侧边栏导航：a）创建带有导航项目的导航栏b）将导航栏样式设置为侧边栏c）将侧边栏位置设置为固定d）使用滚动条管理项目的溢出a)....在本节中，我们将专注于防止侧边栏在滚动主要内容时移动。我们希望将侧边栏样式设置为固定位置，以便主体可以自行滚动而不带上侧边栏。...下面的截图显示了侧边栏与正常内容流分开：固定溢出的侧边栏上面的侧边栏具有固定位置。页面的正文继续滚动，但侧边栏保持在用户的视图中。...使用滚动条管理内容溢出防止导航项目显示在侧边栏之外非常简单。只需使用一行CSS代码即可完成此操作，该行代码使用overflow-y属性。

    6.1K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券