1.首先在需要使用tabs扩展组件的.json文件中引入"mp-tabs": "@miniprogram-component-plus/tabs"。
打开终端,安装依赖npm install。
2.在工具栏中找到工具-构建npm
3.npm构建完成后会在项目根目录下生成miniprogram_npm文件夹,并且文件夹内有引入的tabs扩展组件。
4.进入正题,在调用tabs扩展组件的组件、页面中传递参数swiperStyle(String)。
5.参数传递后那么就在tabs扩展组件的目录下(第三点)的index.js接收swiperStyle参数,
6.接收参数后在tabs扩展组件目录下(第三点)的index.wxml中找到swiper并将index.js接收的参数(swiperStyle)以动态style的方式赋值给swiper标签。
7.获取列表内容的高度('.tab-content')。因为'.tab-content'在#shadow-root虚拟Dom下无法直接使用wx.createSelectorQuery().select('')获取节点,并且返回null。在.select()前加上.in(this)。
const that = this
// 获取节点的高度
const query = wx.createSelectorQuery()
query.in(this).select('.tab-content').boundingClientRect(function (res) {
that.setData({
tabSwiperHeight: res.height,
})
})
query.exec()
参考:https://developers.weixin.qq.com/community/develop/doc/0000663a034ca08c7087f5b1957000
不知您为什么这么做,我因为官方这个tab扩展组件没有高度这个问题,参考您的文章搞了一个晚上。最终用css flex解决。不需要改源码,不需要去读shadow-root。
但是您这里好像每个tab的content都有不同的高度是么。我最终实现的结果,每个tab content的高度都等于窗口高度,理论上也没什么问题