vant/vue——tab栏切换上下箭头功能实现

有的tab栏需要点击两次从而达到排序的功能

下面是实现双重tab栏切换功能

css样式

.active {
  color: red;
}
.black{
  color: black;
}

标签部分

<ul>
    <li
          v-for="(item, index) in screen.lis"
          @click="lisBtn(index)"
          :class="{ active: screen.currentindex === index }"
          :key="index"
        >
          <span class="span-top-down"
            >{{ item.name }}
            <van-icon
              name="arrow-up"
              class="top"
              :class="{black:item.status === 1 ? 'black' : ''}"
            />
            <van-icon
              name="arrow-down"
              :class="item.status === 2 ? 'black' : ''"
              class="down"
            />
          </span>
        </li>
</ul>

这里对象中要设置一个status值来判断这个箭头显示对应的颜色

data{
    return{
       screen: {
        currentindex: 0,
        lis: [
          {
            name: "综合",
            status: 1,
          },
          {
            name: "销量",
            status: 0,
          },
          {
            name: "价格",
            status: 0,
          },
          {
            name: "筛选",
            status: 0,
          },
        ],
      },
    }    
}

方法部分：获取老的索引和老的状态，判断索引值是否为老的索引，如果是老索引为 默认值（status）1时则返回一个2，不是则还是返回默认值（status）1

如果判断的索引值不等于老的索引，那就生成一个新的状态，把lis列表中的索引值给到新的状态，并让老状态值为0，新状态为1，并且让这个默认的索引值等于index

这样就完成了二级嵌套按钮选项

    lisBtn(index) {
      var oldIndex = this.screen.currentindex;
      var oldItem = this.screen.lis[oldIndex];
      if (index == oldIndex) {
        oldItem.status = oldItem.status === 1 ? 2 : 1;
      } else {
        var newItem = this.screen.lis[index];
        oldItem.status = 0;
        newItem.status = 1;
        this.screen.currentindex = index;
        //  console.log(newItem);
      }
    },

效果如下：