uniapp:swiper+scroll-view自适应高度和滚动
一、问题原因niapp的swiper组件,默认大小为150px(swiper组件是类似于PC端的Tab页,左右切换,详情见官方文档)这显然不符合我们平时的业务需求当有大量数据需要渲染时,我们就需要swiper的高度为自适应的,同是配合scroll-view实现区域滚动效果二、代码多说无益,直接上才艺<swiper :current="current" duration="400" @chan
·
一、问题原因
uniapp
的swiper
组件,默认大小为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确实没啥可讲的,希望能通过简单的讲解来帮你快速的解决实际问题。
技术在于分享,分享助于学习,加油!
更多推荐
已为社区贡献3条内容
所有评论(0)