swiper的自适应高度问题

众所周知，swiper组件的元素swiper-item是设置了绝对定位的，所以里面的内容是无法撑开swiper的，并且给swiper盒子设置overflow：visible也是没有用的，有几种解决方法，根据不同的需求使用。

给swiper-item里的内容加scaoll-view包装；

通过uniapp api，直接选取有实际内容的DOM，并获取到他的高度，动态设置swiper的高度

方法一

html部分

<view class="nav">...</view>
<swiper class="swiper">
        <swiper-item>
              <scroll-view scroll-y="true" class="scroll">
              <!-- 这里是内容 -->
              </scroll-view>
        </swiper-item>
</swiper>

css部分

.nav{
        height:400px;
}
.swiper{
    height: calc(100vh - 400rpx);
}
.scroll{
        height: 100%;
}

方法二

html部分

<swiper class="swiper" :style="{height:swiperHeight + 'px'}" :current="current" @change="changeCurrent">
    <swiper-item class="swiper1">
      <!-- 这里是内容 -->
    </swiper-item>>
    <swiper-item class="swiper2">
      <!-- 这里是内容 -->
    </swiper-item>>
    <swiper-item class="swiper3">
      <!-- 这里是内容 -->
    </swiper-item>>
</swiper>

js部分

export default {
        data() {
        return {
            swiperHeight:0, //外部的高度
            current:0
        }
    },
    onLoad() {
                this.getElementHeight('.swiper' + this.current)
        },
    methods:{
        //点击tab切换
        changeCurrent(index) {
            this.current = index;
            this.getElementHeight('.swiper' + this.current)
        },
        //动态获取高度
        getElementHeight(element) {
            //一定要 this.$nextTick 完成之后在获取dom节点高度
            this.$nextTick(()=>{
                let query = uni.createSelectorQuery().in(this);
                query.select(element).boundingClientRect(data => {
                    console.log(data.height);
                    this.swiperHeight = data.height;
                }).exec()
            })
        }
    }
}

扩展：
使用第三方插件，动态改变width
需求：u-charts等其他第三方组件动态改变width，单位px，屏幕宽度有375，414，320，411....
之前的做法是 uni.getSystemInfoSync() 获取不同的宽度，然后赋值，
但是新的设计图两边有margin：0 14rpx;
这样每个都要动态计算，实际宽度 (750-14-14)/750 单位rpx 即(750-14-14)/750/2 单位px;
其他的等比例设置，以此类推，非常复杂
使用这个方法简单高效
例如：
html部分
<view class="main">

<u-charts :width="width" />
</view>
css部分
.main{
//u-charts实际宽度不是屏幕宽度
margin: 28rpx 14rpx 0 14rpx;
}
js部分
export default {
data() {
return {
width:0
}
},
onLoad() {
this.getElementWidth('.main')
},
methods:{
//动态获取高度
getElementWidth(element) {
//一定要 this. $nextTick 完成之后在获取dom节点高度 this.$ nextTick(()=>{
let query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect(data => {
console.log(data.width);
this.width = data.width;
}).exec()
})
}
}
}