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

Sidemenu和可滚动表单/容器

Sidemenu是一种常见的用户界面设计模式,通常用于创建具有导航功能的侧边栏菜单。它通常位于应用程序或网页的左侧或右侧,并提供了一系列导航链接或图标,以便用户可以快速访问不同的页面或功能。

可滚动表单/容器是指在应用程序或网页中,当内容超出可见区域时,用户可以通过滚动操作来查看隐藏的内容。这种设计模式常用于长列表、表单或包含大量文本的容器,以确保用户可以方便地浏览和操作内容。

以下是对Sidemenu和可滚动表单/容器的详细解释:

  1. Sidemenu(侧边栏菜单):
    • 概念:Sidemenu是一种用户界面设计模式,用于在应用程序或网页中创建具有导航功能的侧边栏菜单。
    • 分类:Sidemenu可以根据其布局和交互方式进行分类,例如固定侧边栏、折叠式侧边栏、可拖动侧边栏等。
    • 优势:Sidemenu可以提供简洁的导航方式,使用户可以快速访问不同的页面或功能。它还可以节省屏幕空间,特别适用于响应式设计和移动应用程序。
    • 应用场景:Sidemenu适用于各种应用程序和网页,特别是那些需要多级导航或具有大量页面或功能的项目。
    • 推荐的腾讯云相关产品:腾讯云移动应用分析(https://cloud.tencent.com/product/mga)
  • 可滚动表单/容器:
    • 概念:可滚动表单/容器是指在应用程序或网页中,当内容超出可见区域时,用户可以通过滚动操作来查看隐藏的内容。
    • 分类:可滚动表单/容器可以根据其滚动方式进行分类,例如垂直滚动、水平滚动或同时支持垂直和水平滚动。
    • 优势:可滚动表单/容器可以使用户方便地浏览和操作大量的内容,而无需占用过多的屏幕空间。它还可以提供更好的用户体验,特别是在移动设备上。
    • 应用场景:可滚动表单/容器适用于包含长列表、表单或大量文本的应用程序和网页。
    • 推荐的腾讯云相关产品:腾讯云移动应用分析(https://cloud.tencent.com/product/mga)

请注意,以上推荐的腾讯云产品仅供参考,具体的产品选择应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Android开发(3) 滚动的录入表单演示

前言 软件开发很多工作就是收集表单,展示一个表单等待用户录入表单数据。那么我们就做个这样的的布局演示吧。...本文使用的控件有: RelativeLayout 相对布局 ScrollView 滚动视图 TableLayout 表格布局 ?...中间:表单内容 ? 底部:操作按钮 ? 实现 实现这样的布局一定要用到RelativeLayout 相对布局,我们这样指定我的布局。...,可以看到 顶部控件使用一个RelativeLayout 名字是:toppanel 底部控件使用一个RelativeLayout 名字是:panelBottom 中间控件使用一个ScrollView,滚动视图控件...该控件的好处是当它的子控件太长时,会自动出现滚动条。 下面我们为ScrollView下添加一个TableLayout,这个一个表格布局控件,使得布局非常整齐。

1.2K00

【Java AWT 图形界面编程】Container 容器 ③ ( ScrollPane 滚动容器示例 )

文章目录 一、ScrollPane 滚动容器示例 一、ScrollPane 滚动容器示例 ---- ScrollPane 滚动容器 无法在 屏幕中独立存在 , 必须 依赖于 Frame 窗口而存在...; 如果要 显示 ScrollPane 滚动容器 , 需要 将其添加到 Frame 窗口中 才能显示出来 ; 代码示例 : import java.awt.*; public class HelloAWT...// 默认情况下 ScrollPan 容器 只有在显示不下的时候才显示滚动条 // 如果在构造函数中设置了 ScrollPane.SCROLLBARS_ALWAYS 参数..., 则总是显示滚动条 ScrollPane scrollPane = new ScrollPane(ScrollPane.SCROLLBARS_ALWAYS); //...Button("测试按钮")); // 将 ScrollPan 添加到 Frame 窗口中 frame.add(scrollPane); // 设置窗口位置大小

44110
  • 微信小程序实践:2.3 滚动容器组件之 scroll-view

    scroll-view是滚动视图区域组件。这个组件几乎是每一个复杂的多页面小程序都会用的,是使用最广泛的组件之一,但也是在社区被开发者最广为诟病的组件之一。...关于这个组件,有以下几个问题值得思考: 1,当我们说滚动时,涉及到外面的滚动容器与里面的滚动实体两个对象,我们说滚动到顶部、滚动到底部,指的是什么呢?是什么到顶部,什么到底部了?...官方文档说,在使用scroll-into-view时,「设置哪个方向滚动,则在哪个方向滚动到该元素」。...如果内容少,建议直接添加一个看不见的容器,使内容高度一定大于滚动框架的高度,就没有这个问题了。...不支持也情有原,因为要滚动,普通组件与原生组件都不在一个层,一个要上面,一个要下面,怎么同步? 网上有人说,小程序scroll-view不支持嵌套textarea等组件,那是旧版本。

    15.1K30

    利好前端开发!ChromeEdgeFirefoxSafari 决定合力解决 Web 兼容性问题 !

    Containment(CSS contain 属性) contain 属性用于识别测量特定容器的大小,然后根据该容器的大小应用不同的样式。...Form Fixes(表单修复) 关于表单的一些操作性,包括 appearance 属性、、禁用表单控件上的事件,以及输入元素、表单提交表单验证的错误处理等。...Scrolling (滚动控件) 这条是关于页面滚动的兼容性,Scroll snap 提供了控制界面滚动方式内容显示方式的工具。...CSS 中的 scroll-behavior 属性设置当滚动由导航或 CSSOM 滚动 API 触发时,滚动框会出现什么行为。...Subgrid(子网格) Subgrid 轻松将网格容器的后代元素放置在该网格上,在跨复杂布局排列项目时无需考虑 DOM 结构。

    2.2K20

    iOS开发常用之网络

    Eureka.swift - Eureka是XLForm的Swift的移植版本,一个可以帮助开发者们快速构建iOS各种复杂表单的库,具有较高的扩展性,方便自定制样式。...它使用基于ViewController的容器特性(而不是滚动视图)来管理各个子页面,以支持无限分页,源码推荐说明。...LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏状态栏重叠。...MediumScrollFullScreen - Medium的扩展滚动页面,上下滚动时,全屏显示内容,并自然消隐上下菜单。...SideMenu - swift实现,一款带动画效果定制幻灯片菜单,可以学习其动画实现思路.PS对汉堡式菜单,虽然很常用,不过,苹果并不鼓励使用,甚至有开发小组对其弊病用自家上线应用前后数据对比进行了抨击

    23.6K10

    Vue.Draggable 文档总结

    特性 支持触摸设备 支持拖拽选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 视图模型同步刷新 vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以现有的...,只有按住拖动手柄才能使列表单元进行拖动 filter: selector 格式为简单css选择器的字符串,定义哪些列表单元不能进行拖放,可设置为多个选择器,中间用“,”分隔 preventOnFilter...fallbackClass: string 当forceFallback设置为true时,拖放过程中鼠标附着单元的样式 dataIdAttr: data-id scroll:boolean当排序的容器是个滚动的区域...,拖放可以引起区域滚动 scrollFn:function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配...scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30 scrollSpeed: number 滚动速度 函数配置 setData: 设置值时的回调函数

    9K20

    angular浏览器兼容性问题解决方案

    问题:edge浏览器下,固定列的边框消失 原因:ng-zorro-antd表格组件使用nzLeftnzRight指令固定的表格列,这两个指令的实现css3中的标签: position: -webkit-sticky...important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性(css3),IE不支持该属性,所以在IE中,会自动降级,表格无固定列,滑动的形式。...针对Edge浏览器降级处理,与IE浏览器效果一致,无固定列,整体横向滚动。 自定义实现固定列,不使用组件的固定列实现,通过使用position: absolute;这种方式来实现表格的固定列。...,我们可以指定宽度,让其超过外层div宽度(这样可以看到滚动效果)。...--- 问题:IE浏览器下,在多个tab页中切换,echart所在容器高度坍塌 原因:IE浏览器下父元素不能动态调整高度(即通过子元素动态改变调整高度) 解决方案:固定echart图表所在的容器高度 -

    3K30

    微信小程序基本组件概述

    一个组件通常包括开始标签结束标签,属性用来修饰这个组件,内容在两个标签之内。 Content goes here ......data- Any 自定义属性 组件上触发的事件时,会发送给事件处理函数 bind / catch* EventHandler 组件的事件 # 基本组件列表 基础组件分为以下七大类: ## 视图容器...(View Container): 组件名 注释 view 视图容器 scroll-view 滚动视图容器 swiper 滑块视图容器 ## 基础内容(Basic Content): 组件名 注释...icon 图标 text 文字 progress 进度条 ## 表单(Form): 组件名 注释 button 按钮 form 表单 input 输入框 checkbox 多项选择器 radio 单项选择器...picker 列表选择器 picker-view 内嵌列表选择器 slider 滚动选择器 switch 开关选择器 label 标签 导航(Navigation): 组件名 注释 navigator

    864100

    2024年,你需要了解下这 12 个现代化 CSS 新属性

    设置此属性后,浏览器会自动调整表单控件、滚动CSS系统颜色等UI元素,以适应相应的主题模式。...提升访问性:对于需要高对比度的用户,暗色模式可以提供更好的视觉访问性。...overscroll-behavior属性允许开发者控制滚动区域的边界行为。当设置为contain时,它可以阻止滚动行为从一个滚动容器传递到其父容器或背景页面。...scrollbar-gutter属性的主要作用是在滚动容器中预留出滚动条的空间。...保持视觉平衡:使用both-edges关键词可以在滚动容器的两侧都预留空间,即使滚动条不可见时也能保持布局的对称性。 浏览器兼容性 结束 至此,我们对几个CSS中的新特性进行了深入的探讨分析。

    1.2K10

    8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

    ,千万不要声明overflow:auto让容器自适应滚动,这样做有可能因为其他格式化上下文的影响而导致自适应滚动失效或产生其他未知效果。...视窗滚动到特定位置,布局固定在该位置,后续不随视窗滚动滚动。该布局产生的效果俗称吸附效果,是一种常见网页效果。譬如吸顶效果吸底效果都是该范畴,经常在跟随导航、移动广告悬浮提示等应用场景里出现。...第1个:top为0px,滚动容器顶部就固定 第2个:top为40px,滚动到距离容器顶部40px就固定 第3个:未声明top/bottom,就一直保持相对定位 第4个:...bottom为40px,滚动到距离容器底部40px就固定 第5个:bottom为0px,滚动容器底部就固定 当然,换成left或right也一样能实现横向的吸附效果。...若产生滚动条,还需对容器的height做适当的微调。

    3.3K20

    【微信小程序】viewscroll-view组件的基本使用

    ✅作者简介:CSDN内容合伙人、阿里云专家博主、51CTO专家博主 个人主页:hacker707的csdn博客 系列专栏:微信小程序 个人格言:但行好事,莫问前程 viewscroll-view...,官方把小程序里的组件分为了9大类,分别是 ①视图容器 ②基础内容 ③表单组件 ④导航组件 ⑤媒体组件 ⑥map地图组件 ⑦canvas画布组件 ⑧开放能力 ⑨无障碍访问 常见的视图容器类组件...①view 普通视图区域 类似于HTML中的div,是一个块级元素 常用于实现页面的布局效果 ②scroll-view 滚动的视图区域 常用于实现滚动列表效果 ③swiperswiper-item...轮播图容器组件轮播图item组件 view组件的基本使用 在hacker页面实现如图所示的flex横向布局效果: ✅hacker.wxml <!

    1K20

    第107期:前端搜索列表中某一项并滚动到可视区域

    标题中描述的场景适用于表单内容项很多,比如几十或者上百条的时候,需要我们滚动表单内容才能找到我们要想要修改的表单项。 也有可能是表格一次展示了百十条数据,需要前端搜索某一项,滚动该项到可视区域内。...因为包含滚动条的容器,含有overflow:scroll或者overflow:auto属性。...计算位置 位置计算需要我们获取滚动容器的位置信息,以及我们查询到的元素的位置信息,分不同的情况进行计算。...情况一,查询元素位于滚动容器之下: image.png 这时候需要滚动容器向上滚动滚动的距离计算方式大致是: let {height} = scrollContent.getBoundingClientRect...情况二,查询元素位于滚动容器之上: image.png 这时候需要滚动容器向下滚动滚动的距离计算方式大致是: // 当前滚动容器的scrollTop - 查询元素超出容器的高度 let currentScrollTop

    1.7K20

    03-微信小程序常用组件-视图容器组件

    微信小程序包含了六大组件:视图容器、基础内容、导航、表单、互动导航。这些组件可以通过WXMLWXSS进行布局样式设置,从而构建出丰富的小程序界面交互体验。...其中,视图容器组件包括viewscroll-view等,用于实现页面的结构滚动效果;基础内容组件包括textimage等,用于显示文本图片内容;表单组件包括button、inputcheckbox...视图容器,相当于html中的div。微信小程序官方文档-组件视图容器微信小程序视图容器组件包括viewscroll-view等,用于实现页面的结构滚动效果。...movable-view移动的视图容器,在页面中可以拖拽滑动 page-container页面容器...root-portal使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果scroll-view滚动视图区域

    33720

    绝无仅有!2019年最全的UI设计之输入字段剖析

    它们通常出现在表单对话框中。 本文将为大家揭秘最佳的输入字段设计技巧以及元素,一起来看看吧。 ? 输入字段包含以下6个部分: 1. 容器字段 2. 前导图标(可选元素) 3. 标签文本 4....理想情况下,用户应该看到所有输入内容,而无需滚动输入字段。 ? 左:容器太紧。右:适当大小的容器 字段宽度也需要符合用户期望 - 它传达需要输入多少字段。...例如,如果表单中有ZIP输入字段,并且你知道ZIP应该有5位数字,那么最好不要使字段太宽。 ? 容器应易于被发现 输入字段应该突出并指示用户可以输入信息。容器周围区域之间应该有足够的对比度。...避免长标签;使用简洁,简短描述性标签(一两个字),以便用户可以快速扫描你的表单。 标签文本应始终可见 标签文本有两种常用的方法: 顶部对齐标签 - 位于容器顶部附近的标签。 ? 浮动标签。...'清晰'的关闭图标 显示此图标帮助用户在一次点击中删除字段中的文本。 ? 注意容器右侧的“交叉”图标。

    2.4K20

    深入理解bootstrap

    一、入门准备 二、整体架构 A.整体架构 1.CSS12栅格系统:以规则的网格阵列来指导规范网页中的版面布已有以及信息分布 2.基础布局组件,如排版、代码、表格、按扭、表单等,可以随意应用在任何元素上...E.表单 1.基础表单:只对表单内的fieldset、legend、label标签进行了设定,对margin、padding、border进行了细化设置,如果在select、input、textarea...(tab)上实现 2.首先navbar的父容器上要应用.navbar样式,其次顶级ul块上要应用.nav.navbar-nav样式 3.使用规则: 菜单样式菜单项保持一致 被单击的链接或者按扭上需要应用...2.用法: 设置滚动容器,即在所要侦测的元素上设置data-target="@selector" data-spy="scroll"属性 设置菜单链接容器,设置id或样式怀data-target一致...在菜单容器内,必须有.nav样式的元素,并且在其内部有li元素,li内鈊的a元素才是可以侦测高亮的菜单链接,即符合.nav li > a这种选择符条件 3.js用法:$('滚动侦测容器选择符').scrollspy

    3.4K60

    【小程序】组件

    常用的视图容器类组件 3. view 组件的基本使用 4. scroll-view 组件的基本使用 5. swiper swiper-item 组件的基本使用 6. swiper 组件的常用属性 7...官方把 小程序的组件分为了 9 大类,分别是: 视图容器 基础内容 表单组件 导航组件 媒体组件 map 地图组件 canvas 画布组件 开放能力 无障碍访问 2....常用的视图容器类组件 view 普通视图区域 类似于 HTML 中的 div, 是一个块级元素 常用来实现页面的布局效果 scroll-view 滚动的视图区域 常用来实现滚动列表效果 swiper... swiper-item 轮播图容器组件 轮播图 item 组件 3. view 组件的基本使用 实现如图的 flex 横向布局效果: 4. scroll-view 组件的基本使用 实现如图的纵向滚动效果...: 5. swiper swiper-item 组件的基本使用 实现如图的轮播图效果: 6. swiper 组件的常用属性 7.

    42220
    领券