首页 > 其他分享 >如何利用浮动容器制作悬浮下拉菜单?

如何利用浮动容器制作悬浮下拉菜单?

时间:2023-01-12 10:36:07浏览次数:41  
标签:浮动 容器 触发器 悬浮 创建 菜单项 文本 下拉菜单

效果展示:

如何利用浮动容器制作悬浮下拉菜单?_菜单项

前置准备:

  • 一个用于点击下拉的菜单按钮
  • 四个菜单项图片素材
  • 四个菜单项文本素材
  • 创建点击执行其他 触发器

具体步骤:

  • 制作悬浮下拉菜单
  • 创建打开 浮动容器 触发器
  • 创建关闭 浮动容器 触发器
  • 创建设置值 触发器

步骤分解:

  • 制作悬浮下拉菜单
  • 添加 浮动容器
  • 添加 重复容器
  • 调整 重复容器 布局
  • 添加菜单项 容器
  • 调整菜单项布局
  • 添加图片素材至菜单项 容器
  • 添加文本素材至菜单项 容器

如何利用浮动容器制作悬浮下拉菜单?_菜单项_02

如何利用浮动容器制作悬浮下拉菜单?_触发器_03

如何利用浮动容器制作悬浮下拉菜单?_下拉菜单_04

如何利用浮动容器制作悬浮下拉菜单?_菜单项_05

  • 创建打开浮动容器触发器
  • 选中菜单按钮组件
  • 创建 触发器
  • 配置 触发器

如何利用浮动容器制作悬浮下拉菜单?_菜单项_06

  • 创建关闭浮动容器触发器
  • 选中 浮动容器
  • 创建 触发器
  • 配置 触发器

如何利用浮动容器制作悬浮下拉菜单?_触发器_07

  • 创建设置值触发器
  • 开启按钮文本的 接受动态数据
  • 选中菜单项的 文本组件
  • 创建 触发器
  • 配置 触发器
  • 菜单项中的其他 文本组件 配置相同的 触发器

如何利用浮动容器制作悬浮下拉菜单?_菜单项_08

如何利用浮动容器制作悬浮下拉菜单?_菜单项_09

如何利用浮动容器制作悬浮下拉菜单?_触发器_10

  • 创建点击执行其他触发器
  • 选中菜单项容器
  • 创建 触发器
  • 配置 触发器
  • 其他菜单项 容器 配置相同的 触发器

如何利用浮动容器制作悬浮下拉菜单?_下拉菜单_11

如何利用浮动容器制作悬浮下拉菜单?_触发器_12


作者:TOWIFY
链接:https://juejin.cn/post/7156790118190153765
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:浮动,容器,触发器,悬浮,创建,菜单项,文本,下拉菜单
From: https://blog.51cto.com/u_15860117/6003648

相关文章

  • 【FAQ】HarmonyOS 3.0 悬浮窗触摸事件被屏蔽
    【问题描述】在HarmonyOS3.0上创建悬浮窗口,触摸事件无法传递到窗口下层,此问题在2.0系统上未发现。【解决方案】原因是HarmonyOS3.0基于Android12版本。Android12上不......
  • 容器服务与达摩院合作 AHPA 获 AAAI 2023 IAAI人工智能创新应用奖
    作者:阿里云容器服务近日,阿里云容器服务ACK与达摩院数据决策团队合作的论文《AHPA:AdaptiveHorizontalPodAutoscalingSystemsonAlibabaCloudContainerService......
  • C++ STL的简单应用(vector容器专题)
    #include<iostream>#include<string>#include<stdlib.h>#include<vector>//#include<algorithm>usingnamespacestd;//vector容器的简单应用voiddemo1(){......
  • 力扣11. 盛最多水的容器(贪心)
    给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i,0) 和 (i,height[i]) 。找出其中的两条线,使得它们与 x 轴共同构成的容器可......
  • 01. Kubernetes - 容器运行时(Container Runtime)
    背景2022年5月3日,Kubernetes1.24版本发布,正式移除对Dockershim的支持,这意味着Docker已经不能直接作为容器运行时运行在之后版本的Kubernetes中。此时就需要......
  • 容器化-Docker-5-Docker容器
    目录Docker容器管理(操作对象是容器)通过一个镜像创建一个容器查看已启动的容器列表启、停、重启、删除已经在容器列表的容器如何进入退出容器查看容器使用的资源inspect检......
  • docker容器迁移
    一、容器镜像迁移将Docker容器迁移到另外一台服务器上,最常用的方法是迁移容器关联到的镜像。对于必须迁移的容器,首先使用dockercommit命令将其保存为Docker镜像。docke......
  • STL关联式容器使用注意、概念总结
    引入继上文STL序列式容器使用注意、概念总结继续总结关联式容器的概念以及一些使用事项。关联式容器与容器适配器基础容器STL中的关联式底层容器:RBtree,hashtabl......
  • 48-Docker-多容器数据共享及持久化
    Docker镜像数据读写原理Docker镜像由多个只读层叠加而成,启动容器时,Docker会加载只读镜像层并在镜像栈顶部添加一个读写层如果运行中的容器修改了现有的一个已经存在的文件,那......
  • 组装式应用新基建——小程序容器技术
    什么是组装式应用?“组装式应用由以业务为中心的模块化组件构成,具备更易使用和可重复使用的代码,可加速新软件解决方案的上市时间,并释放企业价值。”未来的企业是组装式的,那么......