swiper的自适应高度问题
2024-10-19 14:47:34
#swiper的自适应高度问题
众所周知，swiper组件的元素swiper-item是设置了绝对定位的，所以里面的内容是无法撑开swiper的，并且给swiper盒子设置overflow：visible也是没有用的，有几种解决方法，根据不同的需求使用。
- 给swiper-item里的内容加scaoll-view包装；
- 通过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()
})
}
}
}
最新文章
- ios label上显示特殊字符 % "
- WordPress博客系统搜索引擎优化seo全攻略方法
- sencha touch之store
- javascript 学习笔记（权威指南）
- 具体解释VMware 9.0.1安装MAC OS X 10.8(历时近3日感想篇)
- 搭建php环境的几种方法
- UITabBarController及三种控制器的…
- .NET Core使用微软官方类库实现汉字转拼音
- mongodb 数据导出
- 【分享】【原创开源应用第4期】给ili9488，RA8875类显示屏的emWin底层增加DMA加速方案
- 测序数据质控-FastQC
- P5205 【模板】多项式开根
- 题解——Codeforces Round #507 (based on Olympiad of Metropolises) T2(模拟)
- 《DSP using MATLAB》Problem 2.9
- 动态规划：双重DP
- Wide-range regulator delivers 12V, 3A output from 16 to 100V source
- private、protected、public和internal的区别
- Docker运行GUI软件的方法
- MySQL常用命令（三）---最值的搜索
- 【ZJOI2017 Round1练习】D2T3 counter（线段树）