效果：點選tab的同時swiper跟著切換，swiper切換的時候tab的樣式跟著改變

wxml

<view class='collection_view'>
  <view class='tabbar_view'>
    <view bindtap='navbarchange_func' data-current="0" class="nav {{current==0 ? 'active' : ''}}">
      <text class="navtext {{current==0 ? 'active' : ''}}">酒店</text>
    </view>
    <view bindtap='navbarchange_func' data-current="1" class="nav {{current==1 ? 'active' : ''}}">
      <text class="navtext {{current==1 ? 'active' : ''}}">文章</text>
    </view>
  </view>
  <swiper class='swiper' indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" current="{{current}}" autoplay="{{autoplay}}" duration="{{duration}}" indicator-active-color="#fff" indicator-color="#aaa" bindchange="swiperitemchange_func">
    <swiper-item>
           111
    </swiper-item>
    <!-- 收藏文章 -->
    <swiper-item>
      2222
    </swiper-item>
  </swiper>
</view>
 

wxss

.collection_view {
  display: flex;
  flex-direction: column;
}

.tabbar_view {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 25rpx;
  font-size: 30rpx;
  box-shadow: 0px 0px 4rpx 6rpx #eee;
}

.nav {
  color: #444;
  width: 300rpx;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  letter-spacing: 3rpx;
  border-radius: 10rpx;
}

.nav.active {
  color: #f08519;
}

.navtext {
  padding: 20rpx 0rpx;
}

.navtext.active {
  border-bottom: 5rpx solid #f08519;
}

.swiper {
  height: 1000rpx;
  margin-top: 10rpx;
}
 

js

Page({

data: {

//是否採用銜接滑動

circular: false,

//是否顯示畫板指示點

indicatorDots: false,

//選中點的顏色

indicatorcolor: "#ededed",

//是否豎直

vertical: false,

//是否自動切換

autoplay: false,

//滑動動畫時長毫秒

duration: 200,

//索引

current: 0,

},

onLoad: function (options) {

},

//選項卡切換時

swiperitemchange_func: function (e) {

var current = e.detail.current

this.setData({ current: current })

},

//使用者點選tab進行切換時

navbarchange_func: function (e) {

var current = e.currentTarget.dataset.current

this.setData({ current: current })

},

onShareAppMessage: function () {

}

})