微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示

在很多程序中都有一个功能，就是顶部导航栏点击的时候能自动切换页面，并且选中的模块会变换颜色并且底部出现一条横线。



首先思考这个功能的实现原理——通过“点击”这个动作，我们能知道点击的是哪一个模块，那这个模块一定有一个自己的唯一的信息，将这个唯一信息绑定一个特定页面，就能实现对应页面的跳转。而关于颜色的变换，本质上是模块样式的改变，所以一定是在wxss里面进行改变。所谓的改变，不是真的去修改原来样式的值，而是建立一种判断，当模块被点击时（获取到的唯一信息成立时），将这个模块对应到另一种样式设计，所以对一个模块一共是设计两个样式，我暂且将选中时的样式名称作selected，未选中的称为normal

---

接下来只要解决两个问题：
1.点击时文字的颜色变换和下划线显示
2.点击时页面自动跳转

---

但是这两个问题最重要的问题在于，我们怎么获得这个模块在这三个当中的唯一信息（其实就类似于数组序号）

在wxml里设置标签

<view class="case-display">
 <block wx:for="{{scrollViewTitle}}">

	<view class="{{currentIndex==index?'selected':'normal'}}" 
 	id="{{index}}" bindtap="changeCurrentIndex">{{item}}
	</view>

 </block>
</view>    

建立一个数组叫scrollViewTitle，循环这个数组，然后在.js文件的data下面建立这个数组

然后再解释一下这部分代码。

<view class="{{currentIndex==index?'selected':'normal'}}" 
     id="{{index}}" bindtap="changeCurrentIndex">{{item}}
    </view>

currentIndex = = index?‘selected’:‘normal’ 是一个三相选择器，表示如果currentIndex==index成立，那么这个view标签就选择selected这个类的样式设计，如果等式不成立，则选择执行normal这个类的样式设计。
同时注意到这个view标签的显示内容是个item，简化一下就是
<view-{{item}}-view/>。这个item的意思是去data数据中的拿出数组元素，在这里的数组是scrollViewTitle : [‘全部订单’,‘待评价’,‘退款’] , 数组元素是“全部订单，待评价，退款”（也就是字符串）。所以view里的引用就是把这三个直接显示出来了。但是一定要注意，如果这个数组是一个对象数组，那么里面的每一个元素都是一个对象，这样item提出来的就是一个对象了，对象是不能直接用view显示出来的，所以如果要提出一个对象数组的属性，写法是{{item.属性名}}，比如一个放很多人的数组，其中一个对象是小明，那么要显示他的名字，就可以用{{item.name}}

再解释一下这里的index，它是微信小程序系统自带的一个元素，其实表示的就是数组元素下标，即 i ，跟我们以前C语言学的 array【i】是一样的
（index就是i，就是数组元素下标）

但是怎么知道item具体取出来的是数组的哪一个元素呢，怎么将index和数组的元素意义对应呢？重点在于block标签里的wx：for循环。

这个for循环里面是item所在的view标签，循环的作用就是将每一次取出的item和index对应上，这里的item有三项（数组元素有三个），其实等同于在block标签里面生成了三个view标签。

接下来我们在.js文件中创建一个函数changeCurrentIndex，这个函数的作用是将点击得到的数据中的id值赋给前面定义的currentIndex，这样改变后的id值（即点击后）就可以在view标签里跟index下标值比较了。

changeCurrentIndex:function(e){
    this.setData({
      currentIndex:e.currentTarget.id
    })
  },

前面说到这个三相选择器表示如果currentIndex==index成立，那么这个view标签就选择selected这个类的样式设计，如果等式不成立，则选择执行normal这个类的样式设计。所以现在在.wxss文件中设计两种情况对应的样式。

至此，就完成了顶部导航栏点击选项产生颜色变化和底部下划线显示的功能实现。
总结一下思路就是，在.js文件中创立一个函数获取点击后产生的id值，将它和数组下标值比较，如果相等，执行selected类的样式，如果不相等，执行normal类的样式。至于选项模块中的文字内容，可以将其放在data中的一个数组里，然后在view标签里使用{{item}}取出来，可以外面套一层block使用循环将数组元素全部显示并提取出每一个元素的index