顶部页签菜单切换效果设计

edu83

顶部页签菜单可以左右切换，但还没有实现页签菜单的切换效果，单击不同的页签，页签需要呈现为选中状态，同时页签对应的内容也跟着切换。

1、在页签里设计两种样式：一种是select样式，选中时字体加粗；另一种是normal样式，字体不加粗。绑定单击事件switchNav。

2、进入pages/index/index.js文件，定义两个变量：currentTab当前页签的索引值，flag变量用来控制样式选择，如果flag等于页签对应的id，则呈现为选中状态，使用select样式，具体代码如下：

1. Page({
   
2.   data:{
   
3.     currentTab:0,
   
4.     flag:0
   
5.   }
   
6. })

复制代码

3、添加页签菜单单击绑定事件switchNav，动态地给currentTab和flag变量赋值，具体代码如下：

1. Page({
   
2.   data:{
   
3.     currentTab:0,
   
4.     flag:0
   
5.   },
   
6.   switchNav:function(e){
   
7.     console.log(e);
   
8.     var page = this;
   
9.     var id = e.target.id;
   
10.     if(this.data.currentTab == id){
    
11.        return false;
    
12.     }else{
    
13.       page.setData({currentTab:id});
    
14.     }
    
15.     page.setData({flag:id});
    
16.   }
    
17. })

复制代码

4、页签菜单进行切换时，对应的内容也跟着切换，需要使用swiper滑块视图容器组件，进入到pages/inde/index.wxml文件里，使用swiper进行页签内容的布局，具体代码如下：

1. <swiper current="{{currentTab}}"style="height:1500px">
   
2.   <swiper-item>
   
3.       <include src="vip.wxml"/>
   
4.   </swiper-item>
   
5.   <swiper-item>
   
6.       <include src="video.wxml"/>
   
7.   </swiper-item>
   
8.   <swiper-item>
   
9.       我是文章内容
   
10.   </swiper-item>
    
11.   <swiper-item>
    
12.       我是纯文内容
    
13.   </swiper-item>
    
14.   <swiper-item>
    
15.       我是纯图内容
    
16.   </swiper-item>
    
17.   <swiper-item>
    
18.       我是精华内容
    
19.   </swiper-item>
    
20.   <swiper-item>
    
21.       我是穿越内容
    
22.   </swiper-item>
    
23. </swiper>

复制代码

这样单击页签菜单时，不仅菜单标题呈现为选中状态，同时页签内容也跟着变化，实现页签菜单和页签内容的联动效果。点击不同页签会呈现出选中效果及内容变化如图所示。