最简单办法实现自定义底部菜单栏

最近在学习微信小程序,在学习自定义底部菜单栏的时候,各种搜索,研究。

今天发现一个最简单的实现办法,不需要自定义组建。

只需要简单的几句话和一个函数就可以实现。如下图:

第一步:在js文件data中定义一个数组,作为菜单栏的子菜单项目。

c5349c0bedfe46efb5a842a5f6704b00.jpg

 注意,还定义了一个变量,current Index,这个是用来记录,哪一个按钮被点击了。

第二部:定义一个点击事件函数,2dbebaf4e5d54d6ca215d73158ec9ad0.jpg

 第三部,在wxml文件中定义输入几行代码

d969ce07710e4a9583ce2c89cf934a94.jpg

 搞定。

看效果:

a90fda3996384d169bb6fef14ae2273a.jpg

 搞定。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值