页面底部有多个固定图标，但只有一个显示
，这是一种常见的设计模式，被称为“悬浮按钮”或“浮动操作按钮（FAB）”。
悬浮按钮是一种浮动在页面上方的固定图标，通常以圆形或圆角矩形的形式呈现。它可以用来展示主要的操作或功能，以便用户可以快速访问并执行相关操作。
悬浮按钮的优势在于它可以提供一种简洁、直观的用户界面，使用户能够快速找到并使用核心功能。它可以在页面的任何位置固定显示，不会干扰页面的其他内容，同时又能够在需要时方便地被用户点击。
悬浮按钮的应用场景非常广泛。例如，在社交媒体应用中，悬浮按钮可以用来发布新的动态或发送消息；在电子商务应用中，悬浮按钮可以用来添加商品到购物车或进行结算；在新闻阅读应用中，悬浮按钮可以用来分享文章或收藏内容等。
腾讯云提供了一系列与悬浮按钮相关的产品和服务，例如：
- 腾讯云移动推送（https://cloud.tencent.com/product/tpns）：提供了消息推送服务，可以通过悬浮按钮向用户发送通知消息。
- 腾讯云移动直播（https://cloud.tencent.com/product/mlvb）：提供了移动直播服务，可以通过悬浮按钮实现直播功能。
- 腾讯云小程序·云开发（https://cloud.tencent.com/product/tcb）：提供了小程序云开发服务，可以通过悬浮按钮实现小程序的核心功能。
总之，悬浮按钮是一种常见且实用的设计模式，可以提升用户体验和操作效率。腾讯云提供了多种与悬浮按钮相关的产品和服务，可以帮助开发者快速实现这一功能。
相关·内容
我想出了如何将图标固定在页面底部，但现在由于某种原因，只有一个图标会显示。我试着将它们分别放在各自的div中，但仍然不起作用？
浏览 19提问于2017-12-22得票数 0
回答已采纳
我有一排图标，需要在页面底部，它们也需要修复。很简单对吧？不。当你把它们固定好后，图标就会互相分开，所以只有一个图标显示出来。是这样的，但也有机会把它们放在页面的底部，因为我需要position:fixed;}
我总是可以手动放置它们，但这意味着它们不能像我所需要的那样被修复，而且我必须为不同的浏览器声明它们
浏览 3提问于2011-01-01得票数 2
回答已采纳
我有一些图标总是固定在底部(屏幕底部，而不是页面的末尾)。当你不在底部的时候，我希望所有这些图标都是半透明的。当它们在底部时变得不透明，当用户向上滚动时，它们又变成半透明的。另外，当图标是半透明的，用户盘旋在图标上时，只有特定的图标才会变得不透明。当图标位于底部时，不应该有任何悬停效应(因为图标总是不透明的)。
浏览 0提问于2013-11-18得票数 0
回答已采纳
1回答
定位化预警组件
、、
我正在尝试在VueJS/nuxtjs中创建一个alert组件，它将模拟snackbar的行为(在本例中是固定的底部位置，当我们滚动时它固定在底部，这样我们在滚动时就会看到警报)。我已经浏览了vuetify上的警报组件API，并将其与snackbar组件进行了比较，但似乎仍然无法弄清楚它为什么不能工作。我尝试过将位置更改为绝对位置，但由于某种原因，它不是固定在页面滚动时的底部，而是字面上固定在底部</
浏览 15提问于2020-12-29得票数 0
1回答
我想把我的页脚固定在浏览器窗口的底部，但只有在用户已经在页面的最底部的情况下。如果你注意到Safari中的iOS 8或OS X Mavericks/Yosemite，当你滚动过页面限制时，会显示更多的内容，以获得弹性反弹效果。当你有一个固定的标题时，这看起来真的很棒，它只是在页面顶部显示更多的背景，而标题是完全固定的，就像在本机应用程序
浏览 0提问于2014-10-29得票数 4
2回答
我有个关于admob的问题。我有一个包含3个片段的活动，每个片段上都有一个按钮，可以转到下一个片段。我能在每个片段上有不同的广告吗？我的意思是我想在Fragment1和Fragment2上有一个横幅，在Fragment3上有一个间隙广告。我知道我每次活动只能有一个广告。这是否意味着我想要做的是违反了admobs规则？
谢谢
浏览 6提问于2013-08-02得票数 2
回答已采纳
我有一个活动，显示一个固定的横幅，位于屏幕底部和一个可滚动的本地广告，在我的列表视图。
如果广告固定在屏幕顶部或屏幕底部，那么单个页面上的广告数量不应超
浏览 4提问于2017-08-08得票数 2
回答已采纳
0回答
我没有约束，我想将一个视图固定到主视图的底部，所以我选择子视图，然后在Interface Builder的右下角( pin )中单击"w:Any h:Any row“中的图标，然后单击底部的"I”来创建底部约束，但是如果我调整控制器视图的大小(在设计模式下)，视图不会移动，但会出现如下内容：(带数字的红线-而不是将蓝色视图移动到底部)。
我已经把它固定在“底部布局指南”上。我还试图在锁定时从下拉菜单中将其<
浏览 6提问于2016-07-07得票数 0
回答已采纳
1回答
我正在编写一个WPF 95%的图形用户界面应用程序，并需要一个特定的快捷方式图标行为。
底子菜单中的-Every图标代表应用程序固定图标中的控件“页面”。左侧的-The图标是快捷方式--最近的和收藏的--根据点击底部的图标。-我使用堆叠面板作为容器，项目的数量是固定的。-every控件集有它自己的上下文菜单。我试图完成的工作如下:当用户单击底部菜单中的一
浏览 1提问于2011-10-22得票数 0
1回答
我有一个UIViewController格式的UITextView，它是用故事板创建的。
我有类似的代码来填充UITextView中的文本。当在iOS模拟器上运行时，我的UIViewController仍然有文本延伸到屏幕之外。
浏览 26提问于2016-07-29得票数 1
我想要一个像这样的标签栏：注意中间的“我的ID”按钮。所以这是我的主要问题:显然我需要一个SafeArea来处理不规则形状的屏幕，它本身需要嵌入到一个容器中，这样我就可以给条提供它的背景色。但是，通过这样做，我如何才能在中心创建“超大”按钮？
浏览 3提问于2019-08-01得票数 0
我正在创建一个应用程序，在它的底部导航图标，导致应用程序的不同屏幕。
同时，我希望在页面中有指向相同屏幕的图标，同时仍然显示底部导航器图标，但我似乎无法找到绕过它的方法。在点击页面中的图标，我被引导到一个新的屏幕，但没有底部导航图标。
浏览 2提问于2022-06-15得票数 -2
0回答
我有一个组件，它列出了一堆记录，并在底部定位了一个固定的页脚。list-component footer { bottom: 10px;此组件在多个页面中使用，因此当呈现它时，页脚最终位于ion-content</footer> </div>
</
浏览 5提问于2017-11-29得票数 1
回答已采纳
我有一个手推车，当点击购物车按钮时，它会从屏幕的一侧弹出。如果把太多的物品放入购物车，底部就会被切断。所以我添加了溢出:auto，这很好。但是..。所以我想让结账按钮固定在底部，但只有在必要的时候。网站在这里:删除，如果您将该页面上的所有项目添加到购物车，然后单击购物车图标，希望您将看到我的意思。这是一个禅宗车安装与一个定制的模板，我付钱给一个人制作。我只是想稍微
浏览 2提问于2015-10-14得票数 1
回答已采纳
在Windows Phone 7上创建网站的快捷方式时，它创建的图标是网站的快照，而不是我希望它显示的任何类型的图标。例如，使用iOS，我可以指定它将该图标用于主屏幕图像。有没有人成功地为windows phone 7/ IE7手机创建了主屏幕图标？
浏览 0提问于2011-05-13得票数 6
回答已采纳
在这个HTML中，我有多个具有可变行数的表，每个表都有一个可变的高度、一个可变的列数等等。有时，一个(或多个)表足够长，可以显示在多个页面上，因此我可以有一个只有行tbody但没有thead“标签”的页面来判断每个列可以表示什么。
是否有适当的方法强制在显示表的每一页上显示thead？&quo
浏览 5提问于2020-11-16得票数 0
我希望将一条特定的消息(由ID标识)移动到它所在的文本通道的底部。好像是新贴的一样。(这将由命令触发)重新发布消息并不是一个解决方案，因为它下面有很多用户的反应，应该保留下来。你甚至不能假装-作为一个用户的反应，更不用说添
浏览 0提问于2021-08-10得票数 0
回答已采纳
1回答
我正在尝试实现项选择行为，以便当用户按下appbar上的一个按钮时，listview选择模式将从无更改为多个。ListView.SelectionMode = ListViewSelectionMode.Multiple;当选择模式更改为多个时，
浏览 2提问于2015-04-21得票数 0
回答已采纳
1回答
我试图实现完全类似于Instagram应用程序导航系统，其中有一个固定的底部栏，用户可以通过单击底部栏中的图标在屏幕之间导航，相应地，工具栏标题和工具栏返回导航应该被更改。我对此做了大量的研究，很少找到解决办法，但没有一个是完美的。
使用ViewPager :-目前我正在遵循此模式，在每个ViewPager选项卡中创建多个片段堆栈
浏览 4提问于2015-12-30得票数 4
回答已采纳
2回答
这是一个相当奇怪的问题，但请帮助我至少找到一个解决办法或可能性。
在我们的网站上，我们有一些圆形按钮与居中的"+"，打开一组其他按钮的底部时，点击。这些弹出按钮只有图标作为中心内容，每一个贴合24 to的宽度和高度。在我们所有的测试中，这些图标的中心相当集中(当然，交叉浏览器和交叉设备总是有一些像素差异)。现在剩下的最后一个问题是，在联想ThinkPads (浏览器的选择)上，<
浏览 3提问于2017-10-24得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
