微信小程序实现tab和swiper切换结合效果viewpage+tab效果

swiper.js 代码

//index.js
//获取应用实例
var app = getApp();
var mtabW;
Page({
    data: {
        tabs: ["A", "B", "C", "D", "E"],//tob标题
        pageData: ["pageA", "pageB", "pageC", "pageD", "pageE"],//page数据
        activeIndex: 0,
        slideOffset: 0,
        tabW: 0,
        index:0,
        topView: 'A'
    },
    onLoad: function () {
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                mtabW = res.windowWidth / 3;  
                that.setData({
                    tabW: mtabW
                })
            }
        });

    },

    tabClick: function (e) {
        console.log(e)
        var that = this;
        var index = 0;
        for (var i = 0; i < this.data.tabs.length; i++) {
            if (this.data.tabs[i] === e.currentTarget.dataset.item) {
                index = i
                break
            }
        }
        var offsetW = e.currentTarget.offsetLeft; 
        this.setData({
            activeIndex: index,
            slideOffset: offsetW
        });
    },
    bindChange: function (e) {
        var current = e.detail.current;
        var offsetW = current * mtabW;    
        this.setData({
            activeIndex: current,
            index: current,
            slideOffset: offsetW,
            topView: this.data.tabs[current]
        });
        console.log(this.data.topView + ' ' + offsetW)

    }

})

swiper.wxml

    
        
            {{item}}
        
    
    




    
            {{item}}
    
     

swiper.wxss

page {
  height: 100%;
}
view , scroll-view{
  padding: 0px;
  margin: 0px;
}
.weui-navbar{
   width: 100%;
   position: fixed;
   border-bottom: 1px solid #0000ff;
   box-sizing: border-box;
   white-space: nowrap; 
   z-index: 100;
   background: white;
}
.rec{
  width: 100%;
  height: 7%;
}
.weui-navbar .default-item{
  /*width:25%;*/
  display: inline-block;
  text-align: center;
  font-size: 32rpx;
  box-sizing: border-box;
  height: 7%;
  padding-bottom: 20rpx;
}
.weui-navbar .item_on{
   color: #0000ff;
}
.weui-navbar-slider{
    position: absolute;
    width: 160rpx;
    height: 2px;
    content:"";
    background: #0000ff;
    bottom: 0px;
    left: 12.5rpx;
    transition: transform .3s;
}
.swiper-box{
  height: 100%;
  border-bottom: 1px solid #d1d1d1;
}
.swiper-box .swiper-item{
   text-align: center;
   padding-top: 200rpx;
   height: 100%;
}