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上。

 

至此就达到了样式切换的效果,如下: