uni-app swiper设置自定义高度
<p>话不多少先上图，</p><div class="image-package"><img class="uploaded-img lazyload" alt="" width="auto" height="auto" data-src="https://upload-images.jianshu.io/upload_images/17785237-f4984ed747fb8669.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br>
<div class="image-caption">大家可以看到图片中红色区域是头部区域，黄色区域则是我们要滑动的区域。</div>
</div>
<p> 大家可以在uni-app官网上看到swiper高度是默认100%，而swiper-item则是要有固定宽高的，要的效果是什么呢？</p>
<p>1.点击tab可以切换黄色区域视图</p>
<p>2.滑动黄色区域改变视图，支持横向滑动以及纵向滑动</p>
<p>我的思路：因为swiper是要固定高度的，它并不会因为内容而自动撑开，那么我的想法呢就是，1.给swiper一个父元素，父元素设置自适应高度，也就是黄色区域的高度，然后动态赋值给swiper，</p>
<p>1.先考虑整个视图的高度，以及布局，我是把他分为两大块，也就是红色区域以及黄色区域，用flex布局，让红色区域固定高度，黄色区域自动撑满全屏。</p>
<p>注意：当然也可以使用定位的方法，计算出红色区域的高度然后黄色区域设置定位就可以啦，因为我们要的布局方式是黄色区域超出范围后可以上下滑动。</p>
<p>上代码：</p>
<div class="image-package"><img class="uploaded-img lazyload" alt="" width="auto" height="auto" data-src="https://upload-images.jianshu.io/upload_images/17785237-1cef6be9c22770df.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br>
<div class="image-caption">home是整个页面的盒子，footer是黄色区域的盒子，给home设置flex上下排列，footer设置flex</div>
</div>
<p>不会flex弹性盒子布局的小伙伴可以问度娘。</p>
<p>2.这个时候你会发现你设置完成之后还是无法生效的，这是因为你的最外层盒子的高度并没有改变，这个时候我们就要动态设置最外层盒子的高度了。</p>
<p>我的实现思路是：获取手机屏幕高度，然后赋值给最外层盒子，也就是上边的home，这个时候就会撑满全屏，当然也会根据屏幕的大小自动改变的。</p>
<p>我用的方法呢是uni-app 里边的一个原生方法 uni.getSystemInfo（）这个方法呢可以获取手机的基本信息，给大家看下所有信息。</p>
<div class="image-package"><img class="uploaded-img lazyload" alt="" width="auto" height="auto" data-src="https://upload-images.jianshu.io/upload_images/17785237-6719dbc9ae3ba582.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br>
<div class="image-caption">大家可以看到里边有两个高度，一个是屏幕高度，一个是可视区域高度，我们使用第二个</div>
</div>
<p>得到手机可视区域后赋值给home这个时候布局就会生效，</p>
<p>3.在footer，也就是黄色区域自动撑满之后，我们就可以获得到黄色区域的高度，当然使用uni-app提供的方法uni.createSelectorQuery().select('.footer'); //获取某个元素的信息，然后动态赋值给swiper，这个时候swiper就会撑满黄色区域，当然我们结合scroll-view就可以实现上下滑动，以及左右滑动的效果了。</p>
<p>给大家附上完整代码：</p>
<p>html：</p>
<p> </p>
<div class="image-package"><img class="uploaded-img lazyload" alt="" width="auto" height="auto" data-src="https://upload-images.jianshu.io/upload_images/17785237-47bfd0778831dee5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br>
<div class="image-caption">千万不要忘记给scroll-view设置scroll-y滚动方向，不然你设置成功也不会上下滑动的</div>
</div>
<p>js：</p>
<p> </p>
<div class="image-package"><img class="uploaded-img lazyload" alt="" width="auto" height="auto" data-src="https://upload-images.jianshu.io/upload_images/17785237-4f7019ce0a765ac8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br>
<div class="image-caption"> </div>
</div>
<p>css：</p>
<p> </p>
<div class="image-package"><img class="uploaded-img lazyload" alt="" width="auto" height="auto" data-src="https://upload-images.jianshu.io/upload_images/17785237-2363757c31631f83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><br>
<div class="image-caption"> </div>
</div>
<p>好了，差不多就是这么多了，当然方法比较笨，自己也是菜鸟一枚，不过官网也没有明确给出解决办法，在这里给大家分享出来，如果大家有什么不懂的以及要指正的欢迎大家留言，希望可以给大家帮助。</p><br><br>
来源：https://www.cnblogs.com/yushihao/p/11730627.html
頁:
[1]