uni-app使用swiper切换页面每个滑块高度自适应

2021-10-28更新：
结合大家问过的问题有以下几点需注意

• 子组件 切换完 触发请求 拿到数据页面渲染完毕后 触发父组件的获取高度方法更改高度
• 没切换的时候第一次进入高度总是获取不到 可以开个计时器100毫秒后再获取高度
• 仅供参考

分割线

做音乐播放器小程序时，因为swiper的问题耽误不少时间，总结写目前遇到的问题
1，swiper不给他设置高度有个默认高度，当轮播图使用正好，但是用来做切换每个页面时，每个页面的显示区域（高度）都变成了swiper的高度能显示的区域，这时就要给swiper设置高度，发现设置max-height不起作用，设置min-height和height效果都一样，就是给swiper一个固定的高度，但是，现在每个页面的高度及显示内容区域都写死了，显然是不行的，上网找了几个容器高度根据内容确定的文章发现没什么卵用，用放弃用css实现swiper高度的自适应的幻想。
2，使用js实现容器高度自适应
微信小程序没有dom无法使用js的选择器，不过uni-app提供了一个与querySelecror类似的selectorQuery选择器，使用起来还是有点不习惯，但是，道理都差不多，第一行要写，不用管他为什么，第二行就是选择元素，支持大部分的css选择器，有select是所有元素第一个，selecrAll就是所有选择的元素的集合，这里选择每个页面，给每个页面相同的class用来选择，这个方法返回的信息里有这个页面的高度信息，获取对应的高度设置给swiper，就可以实现高度自适应，即swiper发生变化，页面发生切换，就获取当前页面的高度，放到swiper身上来实现效果
首先是swiper的change事件触发获取页面高度的方法（第一次进入小程序默认第一个页面的高度）

<swiper :style="{'height':swiperHeight+'px'}" class="swiper" :current="currentTab" duration="300" @change="swiperTab">
      <swiper-item>
        <musichall class="component"></musichall>
      </swiper-item>
      <swiper-item>
        <play class="component"></play>
      </swiper-item>
      <swiper-item>
        <musiclist class="component"></musiclist>
      </swiper-item>
    </swiper>

swiperTab(){
      let query = uni.createSelectorQuery().in(this);
        query.selectAll(".component").boundingClientRect();
        console.log(query.select(".component"))
        query.exec((res) => {
          this.swiperHeight = res[0][this.currentTab].height;
          console.log(res[0][this.currentTab].height)
          console.log(res)
        })
      }

export default {
    data() {
      return {
        currentTab: 0,
        swiperHeight:''
      }
    },
    created() {
      this.setSwiperHeight()
    },
    methods: {
      swiperTab(e){
        this.currentTab = e.target.current;
        this.setSwiperHeight()
      },
      //点击切换
      clickTab(e){
        if (this.currentTab == e.target.dataset.current) {
          return false;
        } else {
          this.currentTab = e.target.dataset.current;
          
        };
      },
      setSwiperHeight(){
        let query = uni.createSelectorQuery().in(this);
        query.selectAll(".component").boundingClientRect();
        console.log(query.select(".component"))
        query.exec((res) => {
          this.swiperHeight = res[0][this.currentTab].height;
          console.log(res[0][this.currentTab].height)
          console.log(res)
        })
      }
    },
    components:{
      musichall,
      play,
      musiclist
    }
  }

.swiper{
    height: 550px;
    max-width: 100vw;
  }

注意的是swiper-item中的组件的style样式要设置min-height：100%，设置hright：100%都不行不到为啥
这一写，发现东西不多啊，实现的过程感觉忒煎熬了

​​我的网站 hongbin.xyz​​ 欢迎来玩

最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章