uni-app swiper设置自定义高度
<h1> </h1><p>话不多少先上图，</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy1mNDk4NGVkNzQ3ZmI4NjY5LmpwZw?x-oss-process=image/format,png"></p>
<p>大家可以看到图片中红色区域是头部区域，黄色区域则是我们要滑动的区域。</p>
<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>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy0xY2VmNmJlOWMyMjc3MGRmLnBuZw?x-oss-process=image/format,png"></p>
<p>home是整个页面的盒子，footer是黄色区域的盒子，给home设置flex上下排列，footer设置flex</p>
<p>不会flex弹性盒子布局的小伙伴可以问度娘。</p>
<p>2.这个时候你会发现你设置完成之后还是无法生效的，这是因为你的最外层盒子的高度并没有改变，这个时候我们就要动态设置最外层盒子的高度了。</p>
<p>我的实现思路是：获取手机屏幕高度，然后赋值给最外层盒子，也就是上边的home，这个时候就会撑满全屏，当然也会根据屏幕的大小自动改变的。</p>
<p>我用的方法呢是uni-app 里边的一个原生方法 uni.getSystemInfo（）这个方法呢可以获取手机的基本信息，给大家看下所有信息。</p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy02NzE5ZGJjOWFlM2JhNTgyLnBuZw?x-oss-process=image/format,png"></p>
<p>大家可以看到里边有两个高度，一个是屏幕高度，一个是可视区域高度，我们使用第二个</p>
<p>得到手机可视区域后赋值给home这个时候布局就会生效，</p>
<p>3.在footer，也就是黄色区域自动撑满之后，我们就可以获得到黄色区域的高度，当然使用uni-app提供的方法uni.createSelectorQuery().select('.footer'); //获取某个元素的信息，然后动态赋值给swiper，这个时候swiper就会撑满黄色区域，当然我们结合scroll-view就可以实现上下滑动，以及左右滑动的效果了。</p>
<p>给大家附上完整代码：</p>
<p>html：</p>
<p> </p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy00N2JmZDA3Nzg4MzFkZWU1LnBuZw?x-oss-process=image/format,png"></p>
<p>千万不要忘记给scroll-view设置scroll-y滚动方向，不然你设置成功也不会上下滑动的</p>
<p>js：</p>
<p> </p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy00ZjcwMTljZTBhNzY1YWM4LnBuZw?x-oss-process=image/format,png"></p>
<p> </p>
<p>css：</p>
<p> </p>
<p><img alt="" class="has" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNzc4NTIzNy0yMzYzNzU3YzMxNjMxZjgzLnBuZw?x-oss-process=image/format,png"></p>
<p> </p>
<p>好了，差不多就是这么多了，当然方法比较笨，自己也是菜鸟一枚，不过官网也没有明确给出解决办法，在这里给大家分享出来，如果大家有什么不懂的以及要指正的欢迎大家留言，希望可以给大家帮助。</p><br><br>
来源：https://www.cnblogs.com/wjlbk/p/12633395.html
頁:
[1]