首页 技术 正文
技术 2022年11月9日
0 收藏 532 点赞 4,169 浏览 1082 个字

话不多少先上图,

uni-app swiper设置自定义高度

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

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

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

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

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

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

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

上代码:

uni-app swiper设置自定义高度

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

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

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

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

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

uni-app swiper设置自定义高度

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

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

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

给大家附上完整代码:

html:

uni-app swiper设置自定义高度

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

js:

uni-app swiper设置自定义高度

 

css:

uni-app swiper设置自定义高度

 

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,082
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,556
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,406
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,815
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898