uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题
问题所在swiper无法自适应高度,内容显示不全。解决思路(4个)1.懒人法: 直接设置整个swiper高度,100vh等于全屏高度。 (idea来源)<swiper @change="change" style="min-height:100vh;">2.官方推荐:https://uniapp.dcloud.io/component/swiper.html使用竖向滚动时,需要给<
问题所在
swiper无法自适应高度,内容显示不全 (官方的bug吧算是)
最新解决办法 - 20220916
延时一点点,等待页面DOM渲染完毕,
再获取swiper里面的内容的实际高度(单位px),
再动态赋值给swiper设置其高度。
完整代码
<template>
<view>
<!-- Tab标签头部 -->
<view>
<view class="TopTabs" style="display: flex; flex-direction: row; justify-content: space-evenly;">
<view class="oneTab" :class="{'active': showingTabIndex == 0}" @click="showingTabIndex = 0">
All
</view>
<view class="oneTab" :class="{'active': showingTabIndex == 1}" @click="showingTabIndex = 1">
BB
</view>
<view class="oneTab" :class="{'active': showingTabIndex == 2}" @click="showingTabIndex = 2">
CC
</view>
</view>
</view>
<hr>
<!-- Tab标签内容容器 -->
<swiper class="swiper" :indicator-dots="false" :autoplay="false" @change="swiperChanged"
:current="showingTabIndex" :style="{'height': height}">
<swiper-item>
<!-- .oneDom容器 实际高度 会赋值给swiper作为高度 -->
<view class="oneDom">
<view v-for="(item, key) in list" :key="'key'+key">
{{ item }}
<!-- 1到100 -->
</view>
</view>
</swiper-item>
<swiper-item>
第二个列表
</swiper-item>
<swiper-item>
第三个列表
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
// 正在显示的标签页下标
showingTabIndex: 0,
// 测试数据 - onLoad以后填充1到100
list: [],
// 预设的swiper高度, 80%屏幕高度
height: '80vh'
}
},
// 页面OK以后
onLoad() {
// 测试数据填充 - 1到100
for (var i = 1; i <= 100; i++) {
this.list.push(i)
}
// 动态设置Swiper高度
this.setH()
},
methods: {
// 设置高度
setH() {
// 延时设置高度 -- 一定要延时,否则报错 - 300毫秒一般都够了
setTimeout(() => {
// uniapp自带方法 - 获取DOM的高度等信息
// https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#createselectorquery
// 节点查询
const query = uni.createSelectorQuery().in(this)
// 开始
query.select('.oneDom').boundingClientRect(data => {
console.log("【DOM尺寸信息】" + JSON.stringify(data))
// 获取DOM的高度, 单位是像素
let h = data.height
// 补上单位
h += 'px'
// 实际高度赋值给swiper
this.height = h
console.log('【动态设置高度】', h)
}).exec()
}, 300)
},
// 左右滑动时
swiperChanged(e) {
this.showingTabIndex = e.detail.current
console.log('Switch to Tab #', this.showingTabIndex)
}
}
}
</script>
<style>
/* 默认Tab样式 */
.oneTab {
color: black;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
.oneTab:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid transparent;
}
/* active激活状态的Tab样式 */
.oneTab.active {
color: #d3bb30;
}
.oneTab.active:after {
border-bottom: 1px solid red;
}
swiper-item {
padding-left: 10px;
}
</style>
核心代码
<swiper :style="{'height': height}">
// 预设的swiper高度, 80%屏幕高度
height: '80vh'// 延时设置高度 -- 一定要延时,否则报错
setTimeout(() => {
const query = uni.createSelectorQuery().in(this)
query.select('.oneDom').boundingClientRect(data => {
// 获取DOM的高度, 单位是像素
let h = data.height
// 补上单位
h += 'px'
// 实际高度赋值给swiper
this.height = h
}).exec()
}, 300)
解决思路(4个) --- 上面是最新的解决办法
1.懒人法: 直接设置整个swiper高度,100vh等于全屏高度。 (idea来源)
<swiper @change="change" style="min-height:100vh;">
2.官方推荐:https://uniapp.dcloud.io/component/swiper.html
使用竖向滚动时,需要给
<scroll-view>
一个固定高度,通过 css 设置 height。
就像 scroll-view {height: 1200rpx;}
3.自适应高度
假如scroll-view内部是整齐的列表,我们可以统计列表的数量length,乘以每个的高度,
得出scroll-view最佳高度,再动态赋值即可,例如:
:style="{'height':theHeightAfterComputed}"
如图,当前scroll-view里面有三个,每个高度是380rpx,那么:
==== HTML ====
<swiper @change="cc" :style="{'minHeight':swiperMinHeight}">
</swiper>
==== JS ====
computed: {
swiperMinHeight () {
let items = Math.max(this.newProducts.length, this.oldProducts.length)
let height = items * 380
console.log('swiperMinHeight() items = '+items)
return height + 'rpx'
}
}
4. 动态高度赋值办法
uniapp获取元素的宽度、高度
使用“”再通过 :style="{'height':theHeightAfterComputed}"的动态赋值方式,写死
swiper高度,也可以试一下。
我没有实测方法4,懒人法适合我... :)
更多推荐
所有评论(0)