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)

    }

})
 

<scroll-view scroll-x="true" class="weui-navbar" scroll-into-view="{{topView}}">
    <block wx:for-items="{{tabs}}" wx:key='key'>
        <view id="{{item}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" style="width:{{tabW}}px" data-item='{{item}}'>
            {{item}}
        </view>
    </block>
    <view class="weui-navbar-slider" style="transform:translateX({{slideOffset}}px);"></view>
</scroll-view>
<view class="rec" />
<swiper current="{{activeIndex}}" class="swiper-box" duration="100" bindchange="bindChange">
<block wx:for="{{pageData}}" wx:key='key'>
    <swiper-item class="swiper-item">
            <view >{{item}}</view>
    </swiper-item>
     </block>
</swiper>
 

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%;
}