1、本文转载至：http://blog.csdn.net/sophie_u/article/details/71745125

2、效果：

3、最终效果如上。问题： 

1）、tab标题总共8个，所以一屏无法全部显示。 

2）、tab内容区左右滑动切换时，tab标题随即做标记（active）。 

3）、当active的标题不在当前屏显示时，要使其能显示到当前屏中。

4、

一、wxml结构

tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。 

tab内容可左右滑动切换，使用swiper组件实现 

为了偷懒，所以数据都通过wx:for遍历重复出来。

说明：

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。 

2、swiper组件的current组件用于控制当前显示哪一页 

3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

         
              
       
        健康
               
       
        情感
               
       
        职场
               
       
        育儿
               
       
        纠纷
               
       
        青葱
               
       
        全部
               
       
        其他
           
          
              
                   
                        
                             
           
            
             
            
            
            
             欢颜
             
            
             知名情感博主
             
            
             134个回答，2234人听过 
             
            
           
            问TA
            
                          
                     
                
           
      
     

三、js部分

var app = getApp();Page({    data:{        winHeight:"",//窗口高度        currentTab:0, //预设当前项的值        scrollLeft:0, //tab标题的滚动条位置        expertList:[{ //假数据            img:"avatar.png",            name:"欢顔",            tag:"知名情感博主",            answer:134,            listen:2234        }]    },    // 滚动切换标签样式    switchTab:function(e){
            var that = this;        that.setData({            currentTab:e.detail.current        });        that.checkCor();    },    // 点击标题切换当前页时改变样式    swichNav:function(e){
    　　　　　var that = this;　        var cur=e.target.dataset.current;        if(that.data.currentTaB==cur){
   return false;}        else{            that.setData({                currentTab:cur            })        }    },    //判断当前滚动超过一屏时，设置tab标题滚动条。    checkCor:function(){
    　　　 var that = this;      if (that.data.currentTab>4){        that.setData({          scrollLeft:300        })      }else{        that.setData({          scrollLeft:0        })      }    },    onLoad: function() {          var that = this;         //  高度自适应        wx.getSystemInfo( {              success: function( res ) {                  var clientHeight=res.windowHeight,                    clientWidth=res.windowWidth,                    rpxR=750/clientWidth;              var  calc=clientHeight*rpxR-180;                console.log(calc)                that.setData( {                      winHeight: calc                  });              }          });    },      footerTap:app.footerTap})

三、wxss样式

.tab-h{
       height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}.tab-item{
   margin:0 36rpx;display: inline-block;}.tab-item.active{
   color: #4675F9;position: relative;}.tab-item.active:after{
    content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}.item-ans{
    width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}.avatar{
   width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}.avatar .img{
   width: 100%;height: 100%;}.avatar .doyen{
   width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}.expertInfo{
   font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}.expertInfo .name{
   font-size: 16px;color:#000;margin-bottom: 6px;}.askBtn{
    width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}.tab-content{
   margin-top: 80rpx;}.scoll-h{
   height: 100%;}