swiper的自适应高度问题

#swiper的自适应高度问题

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

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

1.方法一

html部分

...

    
        
        
        
    

css部分

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

2.方法二

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()
            })
        }
    }
}

扩展：

html部分

css部分

.main{
		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()
            })
        }
    }
}