问题所在

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,懒人法适合我... :)

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐