圖片發(fā)自簡書App

微信小程序中<swiper>組件可以實現圖片輪播，非常之方便。

wxml代碼

效果圖

其中interval屬性是圖片輪播時間，duration屬性是圖片切換效果的時間

除此之外，swiper還能實現頂部導航欄效果，也就是頁面輪播，當然要實現導航欄效果就沒必要設置輪播啦，手動點擊切換頁面或者滑動切換頁面均可。

導航欄頁面輪播代碼

效果圖

那么問題來了，<swiper>的高度要怎么設置才能滿足我們的需求呢，如果不設置的話，<swiper>的高度默認為頁面的大概三分之一，也就是圖片輪播的效果

不設置頁面高度

設置height為100%呢，他只顯示手機頁面的高度，如果內容超過這個高度就顯示不了了

最下面一個只顯示到一半

解決辦法就是
將你所需顯示的內容全部放到一個<view>里面，通過后臺去獲取這個<view>的高度，然后再將頁面高度設置為獲取到的高度就可以啦。

圖片發(fā)自簡書App

其中.noPay為這個<view>的class名。

以上內容為個人見解，如有誤導，請與本人聯(lián)系，謝謝，與你一起成長。