眾所周知琅坡，swiper組件的元素swiper-item是設(shè)置了絕對定位的歉摧，所以里面的內(nèi)容是無法撐開swiper的，并且給swiper盒子設(shè)置overflow：visible也是沒有用的，有幾種解決方法，根據(jù)不同的需求使用哨查。

1. 給swiper-item里的內(nèi)容加scaoll-view包裝；
2. 通過uniapp api剧辐，直接選取有實際內(nèi)容的DOM解恰，并獲取到他的高度，動態(tài)設(shè)置swiper的高度

方法一

html部分

<view class="nav">...</view>
<swiper class="swiper">
        <swiper-item>
              <scroll-view scroll-y="true" class="scroll">
              <!-- 這里是內(nèi)容 -->
              </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">
      <!-- 這里是內(nèi)容 -->
    </swiper-item>>
    <swiper-item class="swiper2">
      <!-- 這里是內(nèi)容 -->
    </swiper-item>>
    <swiper-item class="swiper3">
      <!-- 這里是內(nèi)容 -->
    </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)
        },
        //動態(tài)獲取高度
        getElementHeight(element) {
            //一定要 this.$nextTick 完成之后在獲取dom節(jié)點高度
            this.$nextTick(()=>{
                let query = uni.createSelectorQuery().in(this);
                query.select(element).boundingClientRect(data => {
                    console.log(data.height);
                    this.swiperHeight = data.height;
                }).exec()
            })
        }
    }
}

擴展：
使用第三方插件浙于，動態(tài)改變width
需求：u-charts等其他第三方組件動態(tài)改變width，單位px挟纱，屏幕寬度有375羞酗，414，320紊服，411....
之前的做法是 uni.getSystemInfoSync() 獲取不同的寬度檀轨，然后賦值 ，
但是新的設(shè)計圖兩邊有margin：0 14rpx;
這樣每個都要動態(tài)計算欺嗤，實際寬度 (750-14-14)/750 單位rpx 即(750-14-14)/750/2 單位px;
其他的等比例設(shè)置参萄，以此類推，非常復(fù)雜
使用這個方法簡單高效
例如：
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:{
//動態(tài)獲取高度
getElementWidth(element) {
//一定要 this.nextTick(()=>{
let query = uni.createSelectorQuery().in(this);
query.select(element).boundingClientRect(data => {
console.log(data.width);
this.width = data.width;
}).exec()
})
}
}
}