uniapp顶部导航栏文字点击变化

Question

点击到热门和动态两个标签时字体会放大和出现下划线 然后搜索框下面的内容也会根据当前选中的标签进行来回切换 来个朋友讲一下要怎么做吧 教我一下

Answer 1

动态绑定class名 active，item为默认样式，active为选中后的样式

<template>
  <view class='tab'>
    <view class='item' :class='{active: index == 1}' @click='handleChange(1)'>热门</view>
    <view class='item' :class='{active: index == 2}' @click='handleChange(2)'>附近</view>
   <view class='item' :class='{active: index == 3}' @click='handleChange(3)'>热门</view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
         index: 1
      }
    },
    methods: {
        handleChange(index) {
          this.index = index;
      }
    }
  }
</script>
 
<style>
  .tab {
      xxx: xxx;
  }
 
  .tab .item {
    xxx: xxx;
  }
 
  .tab .item.active {
    xxx:xxx
  }
</style>