uniapp自定义顶部tabbar

1. 准备数据

headItems: [
   {
        name: '新品',
        value: '',
        isDesc:""
    },
    {
        name: '销量',
        value: 'sale',
        isDesc:""
    },
    {
        name: '价格',
        value: 'price',
        isDesc:""
    },
    {
        name: '筛选',
        value: '',
        isDesc:""
    }
]

2. DOM结构

<view class="tab head-bar">
    <view class="per" v-for="(item,index) in headItems" :class="{'active':index==current}" @tap="headChange(index,item)" :key="index">
        {{item.name}} 
        <view class="icons"  v-if="index == 1 || index == 2">
            <uni-icons  :color="item.isDesc === 1 ? '#DD524D' : '#fff'" class="icon-child" type="arrowup" size="12"></uni-icons>
            <uni-icons  :color="item.isDesc === 0 ? '#DD524D' : '#fff'" class="icon-child" type="arrowdown" size="12"></uni-icons>
        </view>
    </view>
</view>

3. 方法

headChange(index,val) {
    this.current = index;
    this.clear(index);
    if(val.isDesc == ""){
        val.isDesc = 1
    }else if(val.isDesc == 1){
        val.isDesc = 0
    }else{
        val.isDesc = 1
    }
    this.getProductList();
}