微信小程序——自定义底部导航样式切换

1、以下截图是静态展示部分

解析：

1、catchtap='goHome' 是点击事件，点击的时候传递data-num='1'，点击事件方法名都是一样的，只是传入的data-num值不同，通过这个不同的值，使用三元运算符来判断需要显示的样式和图标

2、图标切换，通过上一步说的传入不同的值，如果num==1的时候就显示选中状态的图标，否则显示未选中状态的图标

3、文字颜色切换，同理如果num==1的时候添加类名为active的样式，否则不添加样式。

解析：

1、data里边定义num初始值1，是默认选中的第一项。

2、goHome是点击事件的方法，接受的参数e,里边就包含了传过来的data-num的值，然后通过this.setData({})方法实时将data-num传过来的值更新到data里边的num上。

 

至此就达到了样式切换的效果，如下：