一、问题原因

uniappswiper组件,默认大小为150px(swiper组件是类似于PC端的Tab页,左右切换,详情见官方文档)
这显然不符合我们平时的业务需求
当有大量数据需要渲染时,我们就需要swiper的高度为自适应的,同是配合scroll-view实现区域滚动效果

二、代码

多说无益,直接上才艺

<swiper :current="current" duration="400" @change="swiperChange" :style="{height:swiperheight+'px'}">
		<swiper-item>
			<scroll-view scroll-y>
				<view :style="{height:swiperheight+'px'}">
				.......
				</view>
			</scroll-view>
		</swiper-item>
		
		<swiper-item>
			<scroll-view scroll-y>
				<view :style="{height:swiperheight+'px'}">
				.......
				</view>
			</scroll-view>
		</swiper-item>
</swiper>

// data中定义变量
swiperheight: 500, // 默认给了个高度,具体数值随意

// 核心方法
onLoad() {
	uni.getSystemInfo({
		success: (res) => {
			// 这个减100,看个人需求可以不要,这里我需要和底部隔开一定距离,变相来讲就是让这个swiper少一点高度,你想想我这个操作
			let height = res.windowHeight - uni.upx2px(100)  
			console.log(height);
			this.swiperheight = height;
		}
	})
},

三、思路解析

1、思路就是让swiper组件的高度与屏幕,同是利用scroll-view实现区域滚动
2、这个问题有很多结局方案,我这里只提供了一种,也是我认为最简单直接好用的一种,其他的我都试过,有点点点点用着不如这个舒服

四、总结

这个是个实用帖,这几个api确实没啥可讲的,希望能通过简单的讲解来帮你快速的解决实际问题。
技术在于分享,分享助于学习,加油!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐