评论

tabs扩展组件动态修改swiper高度

使用tabs扩展组件修改swiper高度

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

最后一次编辑于  2020-12-09  
点赞 1
收藏
评论

1 个评论

  • allme 仝辰
    allme 仝辰
    2021-01-30

    不知您为什么这么做,我因为官方这个tab扩展组件没有高度这个问题,参考您的文章搞了一个晚上。最终用css flex解决。不需要改源码,不需要去读shadow-root。

    但是您这里好像每个tab的content都有不同的高度是么。我最终实现的结果,每个tab content的高度都等于窗口高度,理论上也没什么问题

    2021-01-30
    赞同
    回复 1
    • Zhao ZW
      Zhao ZW
      2021-02-03
      楼主之所以这么做,是因为这个官方的tabs组件不能自适应tab-content内容的高度,默认swiper组件高度是150px,如果你的tab内容高度大于150px值,会有显示不出来的内容区,官方组件给的swiper-class虽然可以通过外部自定义class来给swiper区域加高度,但是加了以后会导致所有tab-content内容的高度都一致了。这在一些特殊场景下是不适合的。这可能是楼主的初衷,我今天在尝试用这个tabs组件的时候也发现了这个问题,所以才看到你的回复。🙂
      2021-02-03
      1
      回复
登录 后发表内容