分享一下滚动菜单源码，可以直接用，希望对盟友有帮助 <!
场景：一张内容很大的表格，每隔一段时间刷新数据，用户看数据的时候突然刷新了，由于刷新后滚动条弹到顶部，这时客户再找刚才看的内容，就比较困难了，如何解决了？...思路：首先获取滚动条的位置，然后定时向后台请求数据的时候，把获取的滚动条的位置设成滚动到的位置。
动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2...+ this[k]; } } 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 LeftAside.vue: 测试，通过控制台查看数据是否正常获取： 2.2.3 通过后台获取的数据构建菜单导航...2.2.3.1 先构建一级导航菜单 LeftAside.vue: 页面效果： 2.2.3.2 构建二级导航菜单 LeftAside.vue: 页面效果： 2.3 点击菜单实现路由跳转 2.3.1...系统首页配置 首先创建一个首页组件 配置路由： 配置首页菜单： 菜单图标可以到官网去查找。 设置登录成功后默认显示系统首页： 4....function(page) { this.page = page; this.qry(); } VUE3.0有兴趣的小伙伴可以去看看 以上就是一个简单的首页导航+左侧菜单的介绍
有时候页面很长，元素不在显示范围内时，我们要对元素进行操作可能就会失败，这时我们就要进行一个滚动操作，让元素显示出来就好了。...# 设置目标为某个元素，我使用xpath的定位方法 xp = "//button[text()='确定']" target = driver.find_element_by_xpath(xp) # 滚动到目标位置
系统首页 3.1 准备 3.2 Main.vue 3.3 配置路由 3.4 编辑登录组件 3.5 顶部组件显示折叠或展示图标 3.6 实现左侧栏折叠效果 ---- 1. mockjs 1.1 mockjs...mock.js官网 注：easy-mock，一个在线模拟后台的数据平台 1.2 mockjs使用步骤 1.2.1 安装mockjs依赖 # -D表示只在开发环境中使用 npm install mockjs...-D 1.2.2 在项目中引入mockjs 为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置。.../assets/img/sq.png') } } } 3.6 实现左侧栏折叠效果 步骤： 1.TopNav.vue定义监听函数，监听折叠按键的click事件，并将折叠或打开的状态值通过自定义事件传递给...做到这里以上的首页导航和左侧菜单也就完成的差不多了，其他的下次在带给小伙伴们！！！
结合上面的图片，菜单页的结构的交互需求很容易就整理出来了： 顶部要求显示商家名称，有分享功能。 下方左侧、右侧可分开滚动，滚动左侧不影响右侧，滚动右侧左侧随之联动高亮显示所在的菜单分类。...滚动下方右侧菜品分类详情时，当该分类详情模块顶部接触到滚动区域的顶部，左侧对应的导航菜单栏高亮。...若左侧高亮的导航菜单不在可视区域： 当高亮的导航菜单顶部在左侧 scroll-view 滚动区上方（被遮住了），则将该高亮导航菜单滚动至将高亮导航栏的顶部与左侧可滚动区域顶部重合（高亮菜单为滚动区的第一个分类...通过查看 scroll-view 的相关文档，我们发现，可以使用 scroll-into-view 属性，自动定位右侧需要滚动到的具体位置。...由于小程序无法获取元素的宽高，位置信息，滚动右侧实现左侧联动效果的实现难度非常高。 如何准确的获取右侧滚动到的具体分类，并让左侧导航菜单栏相应分类高亮，且在可视的范围内？
（不包括被积木分类菜单遮住的部分），随着滚动条的滚动，可视工作区中的内容在变化，但是可视工作区整体的宽度/高度是不变的。...积木分类菜单 左侧积木分类列表的菜单 积木弹出列表 点击积木分类菜单才弹出的积木块列表，宽度固定为250 工作区坐标 工作区有一个坐标系，积木放置的位置都是在这个坐标系中。 1.3....滚动条位置 示例中把积木区垂直滚动条移动到了工作区左侧，其主要实现方式为重写scratch-blocks/scrollbar.js中的方法，重写后的方法如下。...点击查看scratch-examples使用 // 移动垂直滚动条到工作区左侧 ScratchBlocks.Scrollbar.prototype.resizeViewVertical = function...(hostMetrics) {} // 设置工作区水平滚动条左侧流程滚动条厚度 ScratchBlocks.Scrollbar.prototype.resizeViewHorizontal = function
可以在以下位置使用扁平按钮： ·在 toolbars上 ·在提示框中，将按钮操作与对话框内容统一起来 ·Inline, with padding，因此用户可以轻松找到它们 ?...---- 底部固定按钮（Persistent footer buttons） 如果app要求操作持续存在且随时可供用户使用，请考虑使用悬浮响应按钮（Floating action button）或底部固定按钮...请勿在固定按钮区域使用浮动按钮。 ? 添加分隔后，底部固定按钮可用于滚动的提示框。 ?...在下拉菜单中滚动的方式与Menus滚动的方式相同。 ? ? 一般的下拉按钮 溢出下拉菜单按钮 这种类型的下拉菜单默认显示箭头或者菜单按钮。点击按钮后会弹出菜单。...点击下拉箭头则会弹出所有状态菜单; 点击任意一个状态会改变当前的状态。 可编辑分段式下拉菜单按钮 可编辑分段式下拉菜单按钮的当前状态位置是可编辑的（例如用来选择文字大小的下拉菜单）。
页面比较简单，主要分为左侧的菜单栏，顶部的导航栏（折叠左侧菜单，切换暗黑模式，员工账号名，退出登录），再下面的标签栏，之后就是主页面显示区域。...，并且层级较深，所以这里我们使用provide发送一下，在菜单组件那里使用inject进行接收。...这里需要讲的内容主要就是左侧的菜单和标签栏，我们先来讲一下左侧的菜单开发。...，还有一个小细节，就是当标签比较多了之后，我们通过侧边栏或者其他方式跳转到已经访问过的页面，如果该页面的标签被超出屏幕被隐藏了，我们需要把标签栏滚动到该标签的位置。...，比如首页，固定的标签栏不可关闭，这里是通过在菜单管理时候配置的是否固定标签栏，固定标签的排序顺序跟菜单排序顺序一样。
❞ 需求分析 位置 ? 首先我打算将文章的目录放置在文章内容的右侧，且是悬浮固定在那里不随浏览器的滚动而滚动。...； 在合适的时候滚动目录列表，使得当前高亮的子目录会出现在滚动区域内部，且尽量处于滚动区域的中间区域； 当点击某个子目录的时候需要高亮当前点击的目录，且文章内容滚动到对应目录的位置，使得点击目录对应的文章标题所在的位置距离可视区域顶部的距离刚好等于一个固定值...28 moreHeight: 10, // 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay: 200...28 moreHeight: 10, // 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay:...// 菜单左侧的线比菜单多出的高度 surplusHeight: 180, // 除了菜单高度+留白高度 delay: 200, // 防抖的延迟时间
fixed 固定定位 相对于浏览器窗口进行位置调整 sticky 粘性定位 是基于用户的滚动位置来定位。 固定定位 相对于浏览器窗口进行定位，其它与绝对定位的特性一致。...常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局 粘性定位 当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示...常见的应用有：吸顶盒导航,滚动吸附效果 1、楼梯式导航、浏览器右侧菜单、底部通栏（固定定位应用） 这三个案例用都是用固定定位来控制其与浏览器位置。...，右自适应后台管理界面布局 （固定定位应用） 顶部导航和左侧菜单相对于浏览器固定定位。...--左侧边栏--> <!
首先是侧边导航栏，我们拖入一个动态面板放在左侧，在样式工具栏中，设置它的位置为0,0，尺寸是256*955，并填充动态面板的背景颜色为#001529。...为了让侧边导航栏放在左边，我们需要固定侧边导航栏的动态面板。 我们在样式工具栏中设置“固定到浏览器”，设置水平固定为“左侧”，垂直固定为“顶部”。 接下来完成里面的内容。...我们双击动态面板进入动态面板内部，拖入一个矩形1组件，在样式工具栏中，修改它的位置为（13，20），尺寸为230*52，填充颜色为透明色，线段宽度为0； 双击矩形1，输入文字“导航菜单”，字体大小为14...顺便设置它的样式，勾选“隐藏边框”，设置滚动模式为“从不滚动”。 交互动作-内容区域 我们希望点击侧边导航栏不同菜单的时候，内联框架展示不同的内容，而内联框架可以绑定我们已经创建好的页面。...在“中继器”的内页，一定要保证组件的位置为（0，0）。
Step 2： 插入“切片器” 选中“表”范围内任意位置，菜单栏“表设计”，点击“插入切片器”，选择需要筛选的列标题； 在“切片器”内选中任意条件，就可以很轻松的完成单一条件或多重条件的数据筛选...，具体使用方法简单摸索一下就会了； Step 3： 固定“切片器”位置 可以看到，当我们以“压力”作为筛选条件的时候，筛选出来的信息还是很多，需要滚动页面进行查看，但是在滚动页面的时候，“切片器”并不会跟随移动...，那么如果我们要再次修改筛选条件的时候，还需要将页面滚动回初始位置，才能够完整的看到“切片器”。...双击左侧“ThisWorkbook” 并在右侧敲入如下代码： 可以根据个人需要增加或减少需要固定的“切片器”，同时可以调整“切片器”所固定的位置。 3....返回Excel界面，滚动页面，并点击任意位置，此时我们看到“切片器”会立即移动到界面指定位置。 5.
我们可以更改任何图层的大小、位置、旋转、自动布局属性、约束、填充和描边。我们可以单独使用这些，也可以一起使用，这取决于我们追求的效果。...此外，由于此按钮在滚动时具有固定位置，因此我们可以在状态更改时保持对齐。 3.组织和对齐按钮 移出子菜单项并添加到操作按钮框架。确认“add”按钮层是顶层。...对于间距，我将“edit”对齐在“Add”按钮上方 32 像素，“speak”在“add”左侧 32 像素，最后是媒体，在“speak”上方 16 像素，在“edit”左侧 16 像素。...如果使用自动布局，请确保我们的框架高度和宽度设置为“固定”。 6.创建组件集，命名实例 我们将分别命名属性“状态”和变体打开和关闭。 7....我使用了默认的 300 毫秒。 9. 将动作按钮实例添加到框架，设置约束并检查固定位置 现在我们开始测试原型。向框架添加一个实例。将约束设置为右下角。最后，检查固定位置，以在滚动时将其保持在原位。
当用户手指向右滑动时，将右侧菜单隐藏，左侧菜单显示，然后通过偏移内容布局的位置，就可以让左侧菜单展现出来。...同样的道理，当用户手指向左滑动时，将左侧菜单隐藏，右侧菜单显示，也是通过偏移内容布局的位置，就可以让右侧菜单展现出来。原理示意图所下所示： ? 介绍完了原理，我们就开始动手实现吧。...如果手指移动距离大于左侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY， * 就认为应该滚动将左侧菜单展示出来。...，如果手指移动距离大于左侧菜单宽度的1/2，或者手指移动速度大于SNAP_VELOCITY， * 就认为应该从左侧菜单滚动到内容布局。...* * @return 如果应该从左侧菜单滚动到内容布局返回true，否则返回false。
super.onMeasure(widthMeasureSpec, heightMeasureSpec); } （4）初始展示中间主体布局 这个就很简单了，HorizontalScrollView 默认的滚动位置是...0，所以就会展示左侧菜单，我们只要把滚动位置设置到左侧菜单宽度就行。...我们在滚动时，松手后应该能自动根据当前滚动位置关闭或者打开菜单。通常就是以菜单的一半作为分界线。...if(滚动距离 < 左侧菜单宽度一半) { 打开左侧菜单 } else if(滚动距离 >= 左侧菜单宽度一半) { 关闭左侧菜单 } else if(滚动距离 < 左侧菜单宽度 + 右侧菜单宽度一半...) { 关闭右侧菜单 } else if(滚动距离 >= 左侧菜单宽度 + 右侧菜单宽度一半) { 打开右侧菜单 } 上面这段逻辑如果不明白的可以多看几遍，明白这个逻辑后才能看下面的代码实现
一、 上中下左固定 - fixed+margin ? 概括：如图，此种布局就是顶部、底部和左侧固定不动，只有中间右侧超出可滚动。...左侧nav栏目，要固定也要用fixed。...margin-left边距值留出了左侧nav的位置，作为block布局流体自适应占满右侧剩余空间： section.fixedLeft article { margin-left: 200px;...概括：如图，此种布局大致同第一幅，顶部、底部固定不动，只有整个中间区域可滚动，包括左侧菜单栏。...这里唯一不同的是左侧菜单栏要同内容区域一同滚动： 去掉fixed固定定位即可。 ?
它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。 在手机上，使用 modal drawers 代替。 ?...导航抽屉表可以从屏幕左侧出现 (1)，或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5％ ?...Permanent navigation drawer ---- 海拔 Standard navigation drawer 可以使用以下其中一个海拔位置： ·与 top app bar 相同的高度（全高...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部而不是左侧或右侧边缘的 modal drawers。
1556704730382.png 菜单栏接入数据 导入组件，定义需要的数据格式 // 导入BScroll 滚动组件 import BScroll from "better-scroll...，https://cn.vuejs.org/v2/api/#ref; calculateHeight()方法获取左侧每一个菜单栏目的元素； 使用selectMenu()方法，在我们点击菜单后，右侧显示对应的商品信息...let el = foodlist[index]; // 滚动到对应元素的位置 this.foodScroll.scrollToElement(el, 250);...} }, computed定义属性 currentIndex属性绑定在左侧菜单栏，使菜单元素与右侧内容作为对应，展示给用户。 ...computed: { currentIndex() { // 根据右侧滚动位置，确定对应的索引下标 for (let i = 0; i < this.listHeight.length
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
