小程序顶部tab和swiper联动切换

效果：点击tab的同时swiper跟着切换，swiper切换的时候tab的样式跟着改变

wxml

  
    
      酒店
    
    
      文章
    
  
  
    
           111
    
    
    
      2222
    
  

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 () {

}

})