css高度自适应屏幕_微信小程序swiper标签高度如何随内容自适应

需要在开发中使用一个选项卡，选择了

微信开放文档-小程序-扩展能力-扩展组件 tabs，

将需要的内容插入插槽。由于内容高度不固定这就要求 tabs自适应内容高度。

解决思路

1. 动态的获取内容的高度

2. 把高度值传给组件

一、 怎样获取内容的高度？

分析观察发现，所有的内容必须放到的view中，获取view的高度，由于这个属性的view有可能有多个所以对应的高度值有多个，所以就把他们放到一个数组中。

class="tab-content" slot="tab-content-{{index}}">view>

在引用组件的页面index. js文件中

  onLoad: function () {    let heightArr=new Array()    wx.createSelectorQuery().selectAll(".tab-content").boundingClientRect(      res=>{res.forEach(res=>{              console.log(res.height)        heightArr.push(res.height)          })      this.setData({heightArr:heightArr})    }    ).exec()  },

二、 怎样把获取到的高度传递给组件呢？

组件中有swiperClass 属性可以传递高度，但是要在css中写从js中获取的值，不知道怎么写就放弃了这个方法了(有会的小伙伴教我一下)。下面是给组件添加一个高度属性。

给组件另外添加一个高度属性

style="height: {{height}}rpx;" // 在组件的wxml文件中swiper标签中加入

tabs组件 wxml文件中：

class="weui-tabs">  <view>。。。省略导航菜单。。。view>    class="{{swiperClass}}"  style="height: {{height}}rpx;"  //加入这句  current="{{activeTab}}"  duration="{{duration}}"  bindchange="handleSwiperChange">    <swiper-item wx:for="{{tabs}}" wx:key="title">      <slot name="tab-content-{{index}}">slot>    swiper-item>  swiper></view>

tabs组件 js文件中：

 height:{type:Number,value:''}, //在组件js文件properties中加入

properties: {        tabs: { type: Array, value: [] },        tabClass: { type: String, value: '' },        swiperClass: { type: String, value: '' },        height:{type:Number,value:''},        activeClass: { type: String, value: '' },        tabUnderlineColor: { type: String, value: '#07c160' },        tabActiveTextColor: { type: String, value: '#000000' },        tabInactiveTextColor: { type: String, value: '#000000' },        tabBackgroundColor: { type: String, value: '#ffffff' },        activeTab: { type: Number, value: 0 },        swipeable: { type: Boolean, value: true },        animation: { type: Boolean, value: true },        duration: { type: Number, value: 500 }    },

三、 现在可以直接给组件添加高度属性了

需要注意的是，我们得到的heightArr是一个数组，这数组的排列顺序和swiper-item 的顺序一致，下标也是从零开始，根据swiper的 current属性(当前所在滑块的 index )，当前显示那个swiper-item 我们就取那个下标的高度传递给组件。tabs组件中有个属性 active-tab (激活 tab 索引 )，这样我们也可以动态的改变下标了

在引用组件的页面index. wxml文件中

<mp-tabs  tabs="{{tabs}}"  activeTab="{{activeTab}}"  swiperClass="weui-tabs-swiper"  activeClass="headline"  tabUnderlineColor="var( --weui-TAG-TEXT-BLUE)"  height="{{(heightArr[activeTab]+20)*(750/windowWidth)}}"  //添加高度属性  bindtabclick="onTabCLick"    bindchange="onChange">  <view class="tab-content" slot="tab-content-{{index}}">。。。省略内容。。。view>mp-tabs>

四、 别忘了添加两个事件，点击和滑动时来改变activeTab值，

在引用组件的页面index. js文件中

onTabCLick(e) {  const index = e.detail.index  this.setData({activeTab: index})},onChange(e) {  const index = e.detail.index  this.setData({activeTab: index})},

*** 注：在js获取的值是px，需要转换成rpx ***

px转换rpx	rpx= px*(750/屏幕宽度)
rpx转换px	px= rpx*(屏幕宽度/750)