在uni-app中，由于swiper组件的swiper-item默认设置为绝对定位，导致内容无法自动撑开swiper的高度。本文介绍了两种解决swiper高度自适应的方法：1) 使用scroll-view包裹内容；2) 通过uniapp API动态获取内容高度并设置swiper高度。此外，还分享了一个高效动态获取组件宽度的方法，用于适应不同屏幕宽度并处理边距的问题。
众所周知，swiper组件的元素swiper-item是设置了绝对定位的，所以里面的内容是无法撑开swiper的，并且给swiper盒子设置overflow：visible也是没有用的，有几种解决方法，根据不同的需求使用。
给swiper-item里的内容加scaoll-view包装；
通过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) {<
最低0.47元/天 解锁文章
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
