微信小程序——swiper与tab结合切换

先贴个图展示下效果：

   

默认“首页”为主题颜色，且是第一个展示页面，当点击“推荐”的时候，“首页”变为黑色，“推荐”变为在主题色，且页面变为另一个展示页。

在新建好的文件中写入相应代码：

1、top.wxml ：

<!--pages/homePage/home.wxml-->
<scroll-view scroll-x="true" class="top_container">
   <view class="top_home_box">
  <view class="top_home {{isFouce==0?'top_home_focus':''}}" bindtap='changeMenu' data-index='0'>首页</view>
  <view class="top_home_recommend {{isFouce==1?'top_home_focus':''}}" bindtap='changeMenu' data-index='1'>推荐</view>
  <view class="clear"></view>
</view>
</scroll-view>
<view class="menu_container" />
<swiper current="{{isActive}}" class="menu_box" duration="100" bindchange="activeChange" >
 <swiper-item class="menu_item">
  <view class="menu_view">first</view>
 </swiper-item>
  <swiper-item class="menu_item">
  <view class="menu_view">second</view>
 </swiper-item>
 
</swiper>

2、top.wxss

/* pages/homePage/hpme.wxss */

page {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.top_container {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.top_home_box {
  height: 43px;
  background: #f5f5f5;
}

.top_home {
  line-height: 40px;
  float: left;
  font-size: 16px;
  padding: 0px 20px 0px 30px;
}

.top_home_focus {
  color: #2ecc71;
}

.top_home_recommend {
  float: left;
  line-height: 41px;
  font-size: 16px;
  padding: 0px 15px 0px 15px;
}

.top_container {
  width: 100%;
  position: fixed;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
  white-space: nowrap;
  z-index: 100;
  background: white;
  height: 80rpx;
}

.menu_container {
  width: 100%;
  height: 7%;
}

.menu_box{
  height: 900px;
  border-bottom: 1px solid #2ecc71;
}

.menu_item{
  text-align: center;
  padding-top: 200rpx;
  height: 100%;
}

 3、top.js

var app = getApp();
Page({
  data: {
    isFouce: 0,
    isActive: 0,
  },
  changeMenu(e) {
    // console.log(e)
    let index = e.currentTarget.dataset.index;
    this.setData({
      isFouce: index,
      isActive:index
    })
    
  },
  activeChange(e){
    // console.log(e)
    let active = e.detail.current;
    this.setData({
      isActive:active,
      isFouce: active
    })

  }
})