uni-app切换选项卡的两种方式

Dear 丶 2022-11-22 05:25 657阅读 0赞

方法一.切换选项卡时，内容改变，内容的样式不同。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70][]

定义索引：默认选中选项一

![20201103181329626.png][]

切换选项卡的索引方法

![20201103181536285.png][]

这是效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 1][]

方法二.切换选项卡时，内容改变，内容的样式相同。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 2][]

定义导航栏选项和索引，默认第一个

![20201103181844572.png][]

切换索引

![20201103181901566.png][]

这是效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 3][]

最后附上代码:

<template>  
  <view class="new-file">  
      
      
      
   <view class="head-nav">  
      <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">选项一</view>  
      <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">选项二</view>  
    </view>  
      
   <view class="content" v-if="navIndex==1">  
      我是选项一  
    </view>  
    <view class="content" v-if="navIndex==2">  
      我是选项二  
    </view>  
      
      
    <view class="head-nav">  
        
     <view :class="listIndex==y?'activite':''" @click="checkListIndex(y)" v-for="(x,y) in navList" :key="y">\{ \{x\}\}</view>  
    </view>  
      
    <view class="content" v-for="(x,y) in navList" :key="y">  
       <view class="" v-if="listIndex==y">  
         <view class="box">盒子</view>  
       </view>  
    </view>  
      
      
      
  </view>  
    
</template>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70]: /images/20221120/6aed031b0f874920afd87e725f1cb4da.png
[20201103181329626.png]: /images/20221120/3affd1f017b64df196117046f7b1cdeb.png
[20201103181536285.png]: /images/20221120/4916edd056d542f2a037c0ffcf31c117.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 1]: /images/20221120/3ae08180ff054db8ae7d8effa5d92fd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 2]: /images/20221120/1428de8d3cee4d28acbfa520e4383436.png
[20201103181844572.png]: /images/20221120/26935c96526f47dfb7a8d995776e3a1d.png
[20201103181901566.png]: /images/20221120/e1cddb8d86914e7285b46034ba946673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0Mjk1NjY3_size_16_color_FFFFFF_t_70 3]: /images/20221120/1dcc2521e86a4709b794b018a641ceb2.png