swiper的自适应高度问题

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

1. 给swiper-item里的内容加scaoll-view包装；
2. 通过uniapp api，直接选取有实际内容的DOM，并获取到他的高度，动态设置swiper的高度

方法一

html部分

...

        
              
              
              
        

css部分

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

方法二

html部分

    
      
    >
    
      
    >
    
      
    >

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部分

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(()=>{
let query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect(data => {
console.log(data.width);
this.width = data.width;
}).exec()
})
}
}
}