微信小程序 扩展组件 tabs 中的 swiper 部分高度自适应

由于官方给了 swiper 固定高度150，且 swiper-item 都是 absolute 定位，所以实际应用中经常会碰到问题，在此记录一下修改方式。

一、正常 npm 下载 tabs 包，并用开发者工具构建 npm

二、修改构建出的目录 miniprogram_npm 目录下的 tabs 插件源码

• 1、修改 tabs 插件的 wxml 文件，添加 style 属性，看下图位置

• 2、修改 tabs 插件的 js 文件，添加 swiperStyle 属性

• 3、使用 tabs 插件的页面添加 swiperStyle 属性，并动态计算高度赋值

<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: '首页'}, {title: '外卖'}, {title: '商超生鲜'}, {title: '购物'}, {title: '美食饮品'}, {title: '生活服务'}, {title: '休闲娱乐'}],
    activeTab: 0,
    tabSwiperHeight: 0
  },
  tabsSwiperHeight() {
    // tab 组件内的swiper高度自适应问题
    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();
  }
}