swiper的自适应高度问题

#swiper的自适应高度问题

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

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

1.方法一

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%;
}

2.方法二

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

扩展：

html部分

<view class="main">
    <!-- ...... -->

  	<!-- 其他属性省略，动态绑定width -->
    <u-charts :width="width" />
</view>

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