uni-app swiper设置自定义高度

喜欢ヅ旅行 2023-07-02 03:18 8阅读 0赞

话不多少先上图，

![format_png][]

大家可以看到图片中红色区域是头部区域，黄色区域则是我们要滑动的区域。

大家可以在uni-app官网上看到swiper高度是默认100%，而swiper-item则是要有固定宽高的，要的效果是什么呢？

1.点击tab可以切换黄色区域视图

2.滑动黄色区域改变视图，支持横向滑动以及纵向滑动

我的思路：因为swiper是要固定高度的，它并不会因为内容而自动撑开，那么我的想法呢就是，1.给swiper一个父元素，父元素设置自适应高度，也就是黄色区域的高度，然后动态赋值给swiper，

1.先考虑整个视图的高度，以及布局，我是把他分为两大块，也就是红色区域以及黄色区域，用flex布局，让红色区域固定高度，黄色区域自动撑满全屏。

注意：当然也可以使用定位的方法，计算出红色区域的高度然后黄色区域设置定位就可以啦，因为我们要的布局方式是黄色区域超出范围后可以上下滑动。

上代码：

![format_png 1][]

home是整个页面的盒子，footer是黄色区域的盒子，给home设置flex上下排列，footer设置flex

不会flex弹性盒子布局的小伙伴可以问度娘。

2.这个时候你会发现你设置完成之后还是无法生效的，这是因为你的最外层盒子的高度并没有改变，这个时候我们就要动态设置最外层盒子的高度了。

我的实现思路是：获取手机屏幕高度，然后赋值给最外层盒子，也就是上边的home，这个时候就会撑满全屏，当然也会根据屏幕的大小自动改变的。

我用的方法呢是uni-app 里边的一个原生方法  uni.getSystemInfo（）这个方法呢可以获取手机的基本信息，给大家看下所有信息。

![format_png 2][]

大家可以看到里边有两个高度，一个是屏幕高度，一个是可视区域高度，我们使用第二个

得到手机可视区域后赋值给home这个时候布局就会生效，

3.在footer，也就是黄色区域自动撑满之后，我们就可以获得到黄色区域的高度，当然使用uni-app提供的方法uni.createSelectorQuery().select('.footer'); //获取某个元素的信息，然后动态赋值给swiper，这个时候swiper就会撑满黄色区域，当然我们结合scroll-view就可以实现上下滑动，以及左右滑动的效果了。

给大家附上完整代码：

html：

![format_png 3][]

千万不要忘记给scroll-view设置scroll-y滚动方向，不然你设置成功也不会上下滑动的

js：

![format_png 4][]

css：

![format_png 5][]

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

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy1mNDk4NGVkNzQ3ZmI4NjY5LmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy0xY2VmNmJlOWMyMjc3MGRmLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy02NzE5ZGJjOWFlM2JhNTgyLnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy00N2JmZDA3Nzg4MzFkZWU1LnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy00ZjcwMTljZTBhNzY1YWM4LnBuZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy0yMzYzNzU3YzMxNjMxZjgzLnBuZw?x-oss-process=image/format,png