{5}首页开发-2-1

一、添加顶部选项卡组件

1、添加顶部选项卡组件scroll-view

  
  
  
  


   
   
   
   


   
   
   
   
    


   
   
   
   
    class="scroll-row-item px-3 py-2 font-md">

   
   
   
   
        {{item.name}}

   
   
   
   
    

   
   
   
   


   
   
   
   



   
   
   
   



   
   
   
   
tabBars:[{

   
   
   
   
    name:"关注"

   
   
   
   
},{

   
   
   
   
    name:"推荐"

   
   
   
   
},{

   
   
   
   
    name:"体育"

   
   
   
   
},{

   
   
   
   
    name:"热点"

   
   
   
   
},{

   
   
   
   
    name:"财经"

   
   
   
   
},{

   
   
   
   
    name:"娱乐"

   
   
   
   
},{

   
   
   
   
    name:"军事"

   
   
   
   
},{

   
   
   
   
    name:"历史"

   
   
   
   
},{

   
   
   
   
    name:"本地"

   
   
   
   
}],

  
  
  
  

2、添加选项卡选中的样式判断

每个子元素添加id :id="'tab'+index"定义默认选择选项卡编号tabIndex:0子元素添加判断样式

  
  
  
  


   
   
   
   


   
   
   
   
    


   
   
   
   
    class="scroll-row-item px-3 py-2 font-md" :id="'tab'+index"

   
   
   
   
    :class="tabIndex===index?'color-main font-lg font-weight-bold':''">

   
   
   
   
        {{item.name}}

   
   
   
   
    

   
   
   
   


  
  
  
  

3、添加切换选项卡事件

添加选项卡事件添加自动滚动到选项卡的属行:scroll-into-view="scrollInfo"添加选项卡切换的过渡动画属行scroll-with-animation

  
  
  
  


   
   
   
   


   
   
   
   
 :scroll-into-view="scrollInfo" scroll-with-animation>

   
   
   
   
    


   
   
   
   
    class="scroll-row-item px-3 py-2 font-md" :id="'tab'+index"

   
   
   
   
    :class="tabIndex===index?'color-main font-lg font-weight-bold':''"

   
   
   
   
    @click="changeTab(index)">

   
   
   
   
        {{item.name}}

   
   
   
   
    

   
   
   
   


   
   
   
   



   
   
   
   
//tab切换

   
   
   
   
changeTab(index){

   
   
   
   
    if(this.tabIndex===index){

   
   
   
   
        return;

   
   
   
   
    }else{

   
   
   
   
        this.tabIndex=index;

   
   
   
   
        //滚动到指定tab

   
   
   
   
        this.scrollInfo = 'tab'+index;

   
   
   
   
    }

   
   
   
   
},