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

这篇博客详细介绍了如何在微信小程序中制作悬浮下拉菜单。首先展示预期效果,接着准备必要的素材和触发器。然后,通过创建浮动容器、打开和关闭浮动容器的触发器,以及设置值的触发器来实现菜单的显示与隐藏。最后,配置点击执行其他触发器以响应菜单项的选择。

效果展示:


157d43c2fd5d6baed3cad9eb2bb28dd3.jpeg

前置准备:

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

具体步骤:

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

步骤分解:

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

3351b585033086f9fc43f7b11a2387c1.jpeg4f25223a0dd1cf6b38d41186743ee494.jpegbb5814cc8efe4815c4e78c8a7db9d251.jpeg4f7cec753e1eb2990c6c048ae94e9452.jpeg

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

9693249c7fa41762560c12271cd441f7.jpeg

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

2b375d980f03f214ae4e97ea09ce9fce.jpeg

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

6617e1344b95aadfdfb315a2d8bb1678.jpegb97fc07ea3872655fdb85d589400626c.jpeg32793267166500d8f60f43db5b064f7e.jpeg

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

dcc271494d839a12a418aa8fefd2d31c.jpeg17fd21085022d3f570099bfbddc423a4.jpeg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值