uni-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:


好了,差不多就是这么多了,当然方法比较笨,自己也是菜鸟一枚,不过官网也没有明确给出解决办法,在这里给大家分享出来,如果大家有什么不懂的以及要指正的欢迎大家留言,希望可以给大家帮助。

你可能感兴趣的:(uni-app swiper设置自定义高度)