uni-appswiper设置⾃定义⾼度
话不多少先上图，
⼤家可以看到图⽚中红⾊区域是头部区域，黄⾊区域则是我们要滑动的区域。
⼤家可以在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 ⾥边的⼀个原⽣⽅法 SystemInfo（）这个⽅法呢可以获取⼿机的基本信息，给⼤家看下所有信息。
⼤家可以看到⾥边有两个⾼度，⼀个是屏幕⾼度，⼀个是可视区域⾼度，我们使⽤第⼆个
得到⼿机可视区域后赋值给home这个时候布局就会⽣效，
3.在footer，也就是黄⾊区域⾃动撑满之后，我们就可以获得到黄⾊区域的⾼度，当然使⽤uni-app提供的⽅法
给⼤家附上完整代码：
html：
千万不要忘记给scroll-view设置scroll-y滚动⽅向，不然你设置成功也不会上下滑动的
js：
css：
好了，差不多就是这么多了，当然⽅法⽐较笨，⾃⼰也是菜鸟⼀枚，不过官⽹也没有明确给出解决办法，在这⾥给⼤家分享出来，如果⼤家有什么不懂的以及要指正的欢迎⼤家留⾔，希望可以给⼤家帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论