小程序 app 怎样设置swiper高度自适应?
话不多少先上图:
大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域。
大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢?
1.点击tab可以切换黄色区域视图
2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动
我的思路:
因为swiper是要固定高度的,它并不会因为内容而自动撑开,那么我的想法呢就是,1.给swiper一个父元素,父元素设置自适应高度,也就是黄色区域的高度,然后动态赋值给swiper,
1.先考虑整个视图的高度,以及布局,我是把他分为两大块,也就是红色区域以及黄色区域,用flex布局,让红色区域固定高度,黄色区域自动撑满全屏。
注意:当然也可以使用定位的方法,计算出红色区域的高度然后黄色区域设置定位就可以啦,因为我们要的布局方式是黄色区域超出范围后可以上下滑动。
上代码:
home是整个页面的盒子,footer是黄色区域的盒子,给home设置flex上下排列,footer设置flex,不会flex弹性盒子布局的小伙伴可以问度娘。
2.这个时候你会发现你设置完成之后还是无法生效的,这是因为你的最外层盒子的高度并没有改变,这个时候我们就要动态设置最外层盒子的高度了。
我的实现思路是:
获取手机屏幕高度,然后赋值给最外层盒子,也就是上边的home,这个时候就会撑满全屏,当然也会根据屏幕的大小自动改变的。
我用的方法呢是uni-app 里边的一个原生方法 uni.getSystemInfo()这个方法呢可以获取手机的基本信息,给大家看下所有信息。
大家可以看到里边有两个高度,一个是屏幕高度,一个是可视区域高度,我们使用第二个
得到手机可视区域后赋值给home这个时候布局就会生效
3.在footer,也就是黄色区域自动撑满之后,我们就可以获得到黄色区域的高度,当然使用uni-app提供的方法uni.createSelectorQuery().select(’.footer’); //获取某个元素的信息,然后动态赋值给swiper,这个时候swiper就会撑满黄色区域,当然我们结合scroll-view就可以实现上下滑动,以及左右滑动的效果了。
给大家附上完整代码:
html:
千万不要忘记给scroll-view设置scroll-y滚动方向,不然你设置成功也不会上下滑动的
js:
css:
ok,就到这里,欢迎留言~