需要在开发中使用一个选项卡,选择了
微信开放文档-小程序-扩展能力-扩展组件 tabs,
将需要的内容插入插槽。由于内容高度不固定这就要求 tabs自适应内容高度。
解决思路
动态的获取内容的高度
把高度值传给组件
一、 怎样获取内容的高度?
分析观察发现,所有的内容必须放到的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) |