uni-app swiper设置自定义高度
话不多少先上图,
大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢?
1.点击tab可以切换黄色区域视图
2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动
我的思路:因为swiper是要固定高度的,它并不会因为内容而自动撑开,那么我的想法呢就是,1.给swiper一个父元素,父元素设置自适应高度,也就是黄色区域的高度,然后动态赋值给swiper,
1.先考虑整个视图的高度,以及布局,我是把他分为两大块,也就是红色区域以及黄色区域,用flex布局,让红色区域固定高度,黄色区域自动撑满全屏。
注意:当然也可以使用定位的方法,计算出红色区域的高度然后黄色区域设置定位就可以啦,因为我们要的布局方式是黄色区域超出范围后可以上下滑动。
上代码:
不会flex弹性盒子布局的小伙伴可以问度娘。
2.这个时候你会发现你设置完成之后还是无法生效的,这是因为你的最外层盒子的高度并没有改变,这个时候我们就要动态设置最外层盒子的高度了。
我的实现思路是:获取手机屏幕高度,然后赋值给最外层盒子,也就是上边的home,这个时候就会撑满全屏,当然也会根据屏幕的大小自动改变的。
我用的方法呢是uni-app 里边的一个原生方法 uni.getSystemInfo()这个方法呢可以获取手机的基本信息,给大家看下所有信息。
得到手机可视区域后赋值给home这个时候布局就会生效,
3.在footer,也就是黄色区域自动撑满之后,我们就可以获得到黄色区域的高度,当然使用uni-app提供的方法uni.createSelectorQuery().select('.footer'); //获取某个元素的信息,然后动态赋值给swiper,这个时候swiper就会撑满黄色区域,当然我们结合scroll-view就可以实现上下滑动,以及左右滑动的效果了。
给大家附上完整代码:
html:
js:
css:
好了,差不多就是这么多了,当然方法比较笨,自己也是菜鸟一枚,不过官网也没有明确给出解决办法,在这里给大家分享出来,如果大家有什么不懂的以及要指正的欢迎大家留言,希望可以给大家帮助。
uni-app swiper设置自定义高度的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- 【swift,oc】ios开发中巧用自动布局设置自定义cell的高度
ios开发中,遇到自定义高度不定的cell的时候,我们通常的做法是抽取一个frame类,在frame类中预算好高度,再返回. 但是苹果出来自动布局之后...春天来了!!来看看怎么巧用自动布局设置自定义 ...
- 小程序笔记三:幻灯片swiper 和图片自定义高度
滑动组件:scroll-view wxml代码 <view> <scroll-view scroll-x="true" class="tab-h&quo ...
- swiper的自适应高度问题
#swiper的自适应高度问题 众所周知,swiper组件的元素swiper-item是设置了绝对定位的,所以里面的内容是无法撑开swiper的,并且给swiper盒子设置overflow:vis ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)
距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...
- iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)
好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...
- [Android Pro] listView和GridView的item设置的高度和宽度不起作用
referece to : http://blog.csdn.net/beibeixiao/article/details/9032569 1. 在Android开发中会发现,有时listVi ...
- GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD)
每一个APP都会用到APP引导页,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了,当然这里讲的不是APP引导页的美化而是APP引导页的高度集成,一行代码搞 ...
- ## GridView 布局:item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##
一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...
随机推荐
- 2019 DevOps 必备面试题——配置管理篇
原文地址:https://medium.com/edureka/devops-interview-questions-e91a4e6ecbf3 原文作者:Saurabh Kulshrestha 翻译君 ...
- C++ const 引用 指针
先简单回忆一下常量的性质: int main() { const int buffSize = 512; buffsize = 512; //× buffSize是常量 } 初始化时: const i ...
- Redis会遇到的问题以及解决方案
1.缓存雪崩 发生场景:当Redis服务器重启或者大量缓存在同一时期失效时,此时大量的流量会全部冲击到数据库上面,数据库有可能会因为承受不住而宕机 解决办法: 1)随机均匀设置失效时间 2)设置过期标 ...
- Centos修改yum源为国内阿里源
以下为修改Centos6.5的yum源: 1. 备份原镜像文件,便于后期恢复 [root@keepmydream ~]# mv /etc/yum.repos.d/CentOS-Base.repo /e ...
- MySQL 分页查询优化
有时在处理偏移量非常大的分页时候查询时,例如LIMIT 1000,10这样的查询,这时MySQL需要查询1010条记录然后只返回最后10条,前面1000条记录都被抛弃,这样的代价非常高.要优化这种查询 ...
- Linux 文件或文件夹重命名命令mv
使用命令mv既可以重命名,又可以移动文件或文件夹.例如: 1.将目录A重命名为B mv A B 2.将/a目录移动到/b下,并重命名为c mv /a /b/c 3.将一个名为abc的文件重命名为123 ...
- onethinkphp 添加钩子报错
今天改了下程序再保存,出现错误:Namespace declaration statement has to be the very first statement in the script 度娘一 ...
- scalikejdbc 学习笔记(1)
build.sbt: import sbt._ import Process._ import Keys._ EclipseKeys.createSrc := EclipseCreateSrc.Def ...
- CocosCreator 快速开发推箱子游戏,附代码
游戏总共分为4个功能模块: - 开始游戏(menuLayer) - 关卡选择(levelLayer) - 游戏(gameLayer) - 游戏结算(gameOverLayer) Creator内组件效 ...
- .NET Core使用gRPC打造服务间通信基础设施
一.什么是RPC rpc(远程过程调用)是一个古老而新颖的名词,他几乎与http协议同时或更早诞生,也是互联网数据传输过程中非常重要的传输机制. 利用这种传输机制,不同进程(或服务)间像调用本地进程中 ...