在uview官网中没找到改色的api,然后就查看源码,发现通过修改源码能实现上图效果,本次组件用的uview 2x版本
修改文件u-tabs文件,然后把依赖文件带过来,如图下:
然后修改my_tabs.vue文件(即原u-tabs)中修改clickHandler方法如下
// 点击某一个标签
clickHandler(item, index) {
item.badge.type = ""
this.list.forEach((item2, index2) => {
if (index2 == index) {
item2.badge.bgColor = "#3297FF"
} else {
item2.badge.bgColor = "grey"
}
})
console.log(item, '测试')
// 因为标签可能为disabled状态,所以click是一定会发出的,但是change事件是需要可用的状态才发出
this.$emit('click', {
...item,
index
})
// 如果disabled状态,返回
if (item.disabled) return
this.innerCurrent = index
this.resize()
this.$emit('change', {
...item,
index
})
},
在到原来的list中的数组修改成如下数据
list1: [{
name: '全部',
badge: {
value: 0,
bgColor: '#3297FF'
}
}, {
name: '药品',
badge: {
value: 0,
bgColor: 'grey'
}
}, {
name: '化妆品',
badge: {
value: 0,
bgColor: 'grey'
}
}, {
name: '医疗器械',
badge: {
value: 0,
bgColor: 'grey'
}
}],