微信小程序顶部tab切换以及滑动

效果图图片如下

 

实现代码xml中

<view class="swiper_tab_view">
 <scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'>
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
     bindtap="swichNav">要闻</view> 

    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" 
    bindtap="swichNav">视频</view>

      <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" 
    bindtap="swichNav">推荐</view> 

     <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" 
    bindtap="swichNav">上海</view> 

      <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" 
    bindtap="swichNav">娱乐</view> 

      <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" 
    bindtap="swichNav">体育</view>  
    </scroll-view>
</view>

 <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  
    
     <swiper-item>  
      <view>要闻</view>  
    </swiper-item>   
     
    <swiper-item>  
      <view>视频</view>  
    </swiper-item>   

        <swiper-item>  
      <view>推荐</view>  
    </swiper-item>

        <swiper-item>  
      <view>上海</view>  
    </swiper-item>

        <swiper-item>  
      <view>娱乐</view>  
    </swiper-item>

        <swiper-item>  
      <view>体育</view>  
    </swiper-item>
    
 </swiper>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    winWidth: 0,
    winHeight: 0,
    scrollleft:0,
    currentTab: 0,  
  },
  /** 
   * 滑动切换tab 
   */
  bindChange: function (e) {
    var that = this;
    that.setData({
       currentTab: e.detail.current
        });

      this.checkCor();
  },

  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

  checkCor:function(){
    if(this.data.currentTab>4){
      this.setData({
        scrollleft:300
      })
    }else{
      this.setData({
        scrollleft:0
      })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    /** 
     * 获取系统信息 
     */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });  
    
  },

wxss

/**index.wxss**/
.tab-h{
  height: 57rpx;
  width: 100%;
  line-height: 51rpx;
  background: white;
  font-size: 16px;
  white-space: nowrap;
  z-index: 999;
  margin-top: 20rpx;
}

.swiper_tab_view{
  width: 100%;
  text-align: center;
  line-height: 80rpx;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #777;
}

.on {
  color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-box view {
  text-align: center;
}

这样实现了效果如果顶部tab不是很多的话就可以不实用scroll-view 嵌套在外层

忘了参考谁的代码写的了,实在抱歉, 这里就不给出demo了,复制过去就可以实现效果,