<mp-tabs 
  tabs="{{tabs}}" 
  activeTab="{{activeTab}}" 
  swiperClass="weui-tabs-swiper"
  bindtabclick="onTabCLick"
  bindchange="onChange"
  activeClass="tab-bar-title__selected"
  swiperStyle="height: {{tabSwiperHeight}}px"
>
  <block wx:for="{{tabs}}" wx:for-item="tab" wx:for-index="index" wx:key="index">
    <view class="tab-content tab-content-{{index}}" slot="tab-content-{{index}}" >
        {{tab.title}}
    </view>
  </block>
</mp-tabs>
Page({
  data: {
    tabs: [{title: '首頁(yè)'}, {title: '外賣(mài)'}, {title: '商超生鮮'}, {title: '購(gòu)物'}, {title: '美食飲品'}, {title: '生活服務(wù)'}, {title: '休閑娛樂(lè)'}],
    activeTab: 0,
    tabSwiperHeight: 0
  },
  tabsSwiperHeight() {
    // tab 組件內(nèi)的swiper高度自適應(yīng)問(wèn)題
    let index = this.data.activeTab;
    let queryDom = wx.createSelectorQuery()
    queryDom.select('.tab-content-' + index).boundingClientRect().exec(rect => {
      this.setData({
        tabSwiperHeight: rect[0].height
      })
    })
  },
  onTabCLick(e) {
    const index = e.detail.index
    this.setData({activeTab: index})
  },
  onChange(e) {
    const index = e.detail.index
    this.setData({activeTab: index})
    this.tabsSwiperHeight();
  }
}