当前位置: 首页 > 网络应用技术

如何实现微信微信计划开发的悬架按钮

时间:2023-03-07 11:23:09 网络应用技术

  在每日小节目的开发中,我们可能需要暂停按钮,并且不会像页面幻灯片那样改变位置。例如,文章详细信息页面的共享按钮,我想将其像悬架一样,或在主页上的主页设置上设置悬挂按钮。要实现一些可扩展的功能,既有美丽,方便又实用

  我将从两个方面解释,一个是实现图片按钮,另一个是暂停按钮。

  在Applet提供的按钮组件中,没有功能将图片设置为单独的按钮。尽管小计划没有自然组件的支持,但我们可以自己实现这种效果

  首先代码

  页码

  CSS样式代码

  圆形是按钮的类,图像是图片的图片

  代码非常简单,小蛋解释了上面的代码

  如果设置了图片按钮,我们必须实施其悬架。为了达到悬架的效果,只需将按钮样式设置为固定

  位置是位置属性,具有许多不同的值。让我们看一下官方固定的定义

  它不为元素保留空间,而是指定元素的位置,通过指定元素相对于视口的位置(视口)。屏幕滚动时元素的位置不会更改。当打印时,元素时将出现在每个页面的固定位置上。固定属性将创建一个新的堆叠上下文层。当元素祖先的转换属性不是 - 不单独时,容器从视图端口更改为祖先。

  我们已经完全实现了浮动按钮的代码。让我们看一下具体效果:

  整个悬架按钮的实现实际上不是代码太多。最主要的是对CSS的知识更彻底。这并不难完成。按钮点击以呈现超酷的特殊效果,跟随我并一起成长。