本來呢，我是有專門整理小程序惡心bug的文章的，每次只要添加匯總就好，

但是呢，鑒于這個問題的惡心程度，所以我把他單獨拿出來說了。

——————————————--------------------------------------------------產品經理都說惡心的需求--------------------------------------------------————————————————————————

要知道，在小程序里邊是有一個封裝好的swiper組件，專門用于輪播圖的切換，

?

正好最近遇到一個項目，模仿朋友圈圖片九宮格，要點擊小圖彈窗跳出預覽大圖，需要大圖左右切換，介于小程序的文檔，我使用的是swiper組件輕松完美的實現了它。

但是，好景又不長，測試階段上線倒數第二天，提出了個bug，有的用戶會傳超出屏幕長度的圖片，需求是不影響正常左右切換的情況下，要讓圖片能夠上下滑動顯示完整。

我的天。。。

要知道，小程序里的swiper會在行間自動添加樣式，swiper及他的御用子元素swiper-item都會被自動加上width和height的100%；所以我們在css中根本控制不了他的高度，更別提讓他overflow-y:hidden；了。

剛好bug還是快下班提的，我就加班解決，受盡折磨。最后放棄了。對，我知道我再轉身的時候，bug就會被解決了。所以我回家睡覺了。

雖然人走了，但是心還在公司啊！回家繼續尋找解決辦法。各種交流群里提問，找大神。最后都回一句這個需求是不是變態。。。

?然后就自己想各種方案。。。

swiper和swiper-item會被默認加上100%的高度，所以想要實現overflow-y：scroll是不可能的額，

想想小程序的縱向滾動就只有scroll-view可以實現，我把scroll-view包住swiper不行，

畢竟每一個swiper-item都是獨立的，有的長有的短，包一個是達不到要求的，就算能滾動，

但是別忘了前邊說的：swiper和swiper-item會被默認加上100%的高度，所以還是不能滾的。

?然后的然后，就是睡一覺吃一頓，bug迎刃而解了！

今天早上來了突然開竅了，把每一個swiper-item里邊包一個scroll-view，再加上feed流中實現短圖片垂直居中，長圖片從上向下滾動的樣式，最后效果就出來了：

?

?

?

后記：

項目上線的前幾個小時，我們突然發現小程序是有類似朋友圈九宮格的圖片API的，哈哈，又好笑又生氣~

?

?

?

聲明：

?

　　請尊重博客園原創精神，轉載或使用圖片請注明：

?

　　博主：xing.org1^

?

　　出處：http://www.cnblogs.com/padding1015/

?

轉載于:https://www.cnblogs.com/padding1015/p/8044324.html

總結

以上是生活随笔為你收集整理的小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。