• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 微信小程序之底部菜单

微信小程序之底部菜单

时间:2023-07-01 14:05 阅读数:72 人阅读 分类:知识百科

  很多人不清楚微信小程序底部菜单是怎么回事,选择菜单、子菜单、取消隐藏菜单又和微信小程序底部菜单有什么关系呢?下面就让小编带大家详细了解微信小程序底部菜单。

    微信小程序tabBar底部导航中文注解api,微信小程序tabBar就是app底部的那个导航栏,可以放1-5导航链接,这里对微信小程序底部导航tabbar的中文解释。微信小程序tabBar是在全局pp.json文件里面配置的。

    微信小程序之----底部菜单action-sheetaction-sheet

  action-sheet是从底部弹出的选择菜单,子菜单通过action-sheet-item和action-sheet-cancel指定,action-sheet-item是菜单项,action-sheet-cancel顾名思义是取消隐藏菜单,我们可以通过为action-sheet-item添加bindtap来触发点击后作出的相应,点击action-sheet-cancel时会触发action-sheet的bindchange事件。可以在bindchange绑定的函数中控制菜单的显示。另外点击空白处时菜单也会隐藏。

  官方文档

  .wxml

 .js

  运行效果

  通过上面的实现,已经可以达到我们想要的效果,但是显示和隐藏的时候比较突兀,我们再给它加点动画,动画的实现其实很简单,在这里介绍两种实现动画的方式,第一个是直接使用在样式文件wxss中实现,另一种是通过微信小程序提供的动画Api实现。

  需要注意的是如果添加动画不能使用hidden属*显示隐藏弹出菜单,而是使用visibility,否则看不到动画效果。

 通过上面的简单介绍,大家应该对微信小程序底部菜单有了一定的了解。希望这篇文章对大家有所帮助,如想了解更多微信小程序底部菜单的相关资料请关注微信小程序商店。

  更多相关推荐:

  个人微信小程序支付功能怎么开发和使用?

  微信小程序导航菜单怎么开发?

  微信小程序导航颜色怎么设置?