uni-app swiper設置自定義高度

話很少少先上圖，

你們能夠看到圖片中紅色區域是頭部區域，黃色區域則是咱們要滑動的區域。

      你們能夠在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 裏邊的一個原生方法  uni.getSystemInfo（）這個方法呢能夠獲取手機的基本信息，給你們看下全部信息。

你們能夠看到裏邊有兩個高度，一個是屏幕高度，一個是可視區域高度，咱們使用第二個

獲得手機可視區域後賦值給home這個時候佈局就會生效，

3.在footer，也就是黃色區域自動撐滿以後，咱們就能夠得到到黃色區域的高度，固然使用uni-app提供的方法uni.createSelectorQuery().select('.footer'); //獲取某個元素的信息，而後動態賦值給swiper，這個時候swiper就會撐滿黃色區域，固然咱們結合scroll-view就能夠實現上下滑動，以及左右滑動的效果了。

給你們附上完整代碼：

html：

 

千萬不要忘記給scroll-view設置scroll-y滾動方向，否則你設置成功也不會上下滑動的

js：

 

 

css：

 

 

好了，差很少就是這麼多了，固然方法比較笨，本身也是菜鳥一枚，不過官網也沒有明確給出解決辦法，在這裏給你們分享出來，若是你們有什麼不懂的以及要指正的歡迎你們留言，但願能夠給你們幫助。