基于uni-app制作的小程序顶部导航条方法分享

主要功能是，通过API接口获取到值，遍历到导航条中。然后在通过tap方法触发方法，实现样式改变，例如底部出现边框，背景色改变等等。
实现这一效果基本原理是，触发方法，改变一个值，然后通过判断这个值来实现样式改变。
写法如下：首先写出基本wxml代码，实现基本样式，可以通过class添加属性来做，不多说。
我的代码是这样 ：

	
		推荐
		{{item.title}}	
	

代码中v-bind部分代码是在做判断：如果currentTab的值是你所设置的值，那么，就给它添加一个on。
你要先在data中声明一个currentTab，并给他一个值，currentTab是个名字，可随意改变。当然也可以不给他值，给他值的话会有一个初始的样式，例如：
data() {
return {
currentTab: 0
}
我给的是0，那么他就会在小程序加载完成时就在 ‘推荐’ 的下面出现一个白条。如果不给就没有。
当然，会这样是因为我给的条件就是如果等于0。这里是为了写不在遍历的值里的内容。
然后再写一个改变之后的样式，这个样式的名字就是问号后的第一个值，我这里是on。
最后就是写一个方法，然后触发它就行了。
我这里用的是tap方法，触发了一个叫swichNav的方法，我在这里传了一个值，当然你也可以不传值，直接在方法中规定值，方法的代码如下：
swichNav:function(id){
console.log(id)
this.currentTab = id;
}
id是接了上面的‘item.id’，
如果你没有传值的话，直接规定this.currentTab = xx; 就可以了，主要是给他一个判断的标准，字母数字单词，等等都可以。
然后效果就实现了，你点击后值改变，然后上面就会根据新的值给新的位置添加样式，就实现了样式改变。