<scroll-view scroll-x="true" class="weui-navbar">  <block wx:for-items="{{tabs}}">  <view id="{{index}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" style="width:{{tabW}}px">  {{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"> <swiper-item class="swiper-item">  <view class="slide-view">tab0</view> </swiper-item>  <swiper-item class="swiper-item">  <view class="slide-view">tab1</view> </swiper-item>  <swiper-item class="swiper-item">  <view class="slide-view">tab2</view> </swiper-item>  <swiper-item class="swiper-item">  <view class="slide-view">tab3</view> </swiper-item> <swiper-item class="swiper-item">  <view class="slide-view">tab4</view> </swiper-item>  <swiper-item class="swiper-item">  <view class="slide-view">tab5</view> </swiper-item>  <swiper-item class="swiper-item">  <view class="slide-view">tab6</view> </swiper-item></swiper>

page { height: 100%;}view , scroll-view{ padding: 0px; margin: 0px;}.weui-navbar{ width: 100%; position: fixed; border-bottom: 1px solid #00bba1; 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: #00bba1;}.weui-navbar-slider{ position: absolute; width: 160rpx; height: 2px; content:""; background: #00bba1; bottom: 0px; left: 12.5rpx; transition: transform .3s;}.swiper-box{ height: 900px; border-bottom: 1px solid #d1d1d1;}.swiper-box .swiper-item{ text-align: center; padding-top: 200rpx; height: 100%;}

//index.js//獲取應用實例var app = getApp();var mtabW;Page({ data: { tabs:["綜合與繪畫","藝術噴漆","泥塑","紙面繪畫","布面繪畫","中國油畫","水墨畫"], activeIndex:0, slideOffset:0, tabW:0 }, //事件處理函數 onLoad: function () {  var that = this;  wx.getSystemInfo({   success: function (res) {    mtabW = res.windowWidth / 4; //設置tab的寬度    that.setData({     tabW:mtabW    })   }  }); }, bindViewTap: function() { wx.navigateTo({  url: '../logs/logs' }) }, tabClick:function(e){  var that = this;  var idIndex = e.currentTarget.id;  var offsetW = e.currentTarget.offsetLeft; //2種方法獲取距離文檔左邊有多少距離  this.setData({  activeIndex:idIndex,  slideOffset:offsetW  }); }, bindChange:function(e){  var current = e.detail.current;  if((current+1)%4 == 0){  }  var offsetW = current * mtabW; //2種方法獲取距離文檔左邊有多少距離  this.setData({   activeIndex:current,   slideOffset:offsetW  }); }})