小程序 - swiper除了左右切換還有上下滾動超出屏幕的內容

本來呢,我是有專門整理小程序惡心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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/539830.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/539830.shtml
英文地址,請注明出處:http://en.pswp.cn/news/539830.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

學徒學計算機,那個有能力的高人愿意收我做學徒啊,我是學計算機的

類似問題答案我學的是計算機專業,南京有那些學校招這個專業啊?跟隨 已跟隨 取消 確定 你是說去學習還是去工作? 如果工作,現在很多對學位有一定要求,一般都要本科以上; 如果是學習,那也得看你自…

Linux磁盤分區及要求

一、分區 1、磁盤分區有主分區,擴展分區和邏輯分區之分。一塊磁盤最多有4個主分區,其中一個主分區的位置可以用一個擴展分區替換,在這個擴展分區內可以劃分多個邏輯分區。 2、一塊磁盤最多只能有一個擴展分區,擴展分區不能直接使…

二分查找和二叉查找樹

2019獨角獸企業重金招聘Python工程師標準>>> 1 二分查找 算法思想: 二分查找要求元素排列有序。首先,假設表中元素是按升序排列,將數組中間位置的元素與查找關鍵字比較,如果兩者相等,則查找成功&#xff1…

springboot判斷有沒有庫_Springboot 使用JPA @Query 注解 查詢語句條件 有可能為空,Oracle數據庫...

網上查了很多資料都是下面的方法,但是不適用于OracleQuery(value "select * from xxx where if(?1 !,x1?1,11) and if(?2 !,x2?2,11)" "and if(?3 !,x3?3,11) ",nativeQuery true)List find(String X1,String X2,String X3);——————————…

臺式計算機技術方案,2017年4月自考02316計算機應用技術真題及答案

本文提供的是2017年4月自考02316計算機應用技術真題及答案,真題不僅能幫助考生復習鞏固學到的知識,還能讓考生了解以往考試難易程度,真正掌握一套真題那么考試也不用擔心了。要考試的你一定要多多練習啊。2017 年 4 月高等教育自學考試全國統…

Linux磁盤編號

一、IDE接口磁盤 Linux的編碼規則是 /dev/hd* -------------------------------hda 第一塊盤 -------------------------------------------hda1 第一分區,hda2 第二分區,hda3 第三分區..... -------------------------------hdb 第二塊盤 …

Linux掛載點和文件系統類型介紹

一、掛載點 Mount Point 這是Linux下訪問磁盤分區的入口,即如果要往分區里寫入數據,就必須通過/boot入口來寫入,這一點和windows是不同的,因為在安裝Linux時,Mount Point項填寫 /boot二、文件系統類型 1、ext2/3/4&…

pythonint函數的參數_向嵌入的Python函數傳遞兩個參數(int和array)

我需要從我的模塊中調用Python函數并為其設置兩個參數:int和array。在現在我在調用這個函數的時候遇到了segfault,我不知道我做錯了什么。有人能指出我的錯誤在哪里嗎?在函數在我的Python模塊中應用程序副本. 如果我從Python代碼調用它&#…

理解lua中 . : self

文章目錄[點擊展開](?)[] 前言點號定義和調用冒號定義和冒號調用運行結果相互調用相互調用運行結果總結前言 在LUA中,經常可以看到:. self,今天在CSDN上看到一篇博客寫的很清楚,轉載過來 原文出處:http://blog.csdn.n…

適合初中文憑學的計算機技術,初中畢業學啥技術好 最吃香的手藝

很多初中畢業的初中生因為成績不是很理想,不能上一所理想的高中,所以選擇學一門技術,那么初中畢業學啥技術好呢,哪些手藝未來比較吃香呢,下面小編為大家分析一下初中畢業應該學什么手藝。初中畢業學哪些技術發展好汽修…

SecureCRT配置

一、下載 路徑:http://www.pc6.com/softview/softview_24396.html 里面有破解教程 二、配置 1、選擇仿真環境養眼的綠色字體黑色背景配置,選擇 traditional option->Global options –>default session -> edit default settings -> 修改…

左室短軸切面_一文讀懂心臟超聲基本切面

一. 本文出現的英文簡稱二.超聲心動圖基本切面采用與心臟相互垂直的三個基本平面,主要觀測心臟各房室腔內徑、容積和室壁厚度及其相關解剖結構運動狀態、功能等。檢查中探頭最常放置的位置包括心底部、心尖部、劍突下,鎖骨/胸骨上窩等。心臟超聲檢查中探…

怎么用計算機彈c哩c哩,計算器音樂c哩c哩樂譜 | 手游網游頁游攻略大全

發布時間:2016-06-29鏟子騎士樂譜有什么用 鏟子騎士樂譜賣不了怎么辦.不少鏟子騎士玩家收集了一些樂譜,那么這些樂譜功能是什么呢?下面99單機網小編給大家介紹鏟子騎士樂譜有什么用 鏟子騎士樂譜賣不了怎么辦. 樂譜可以賣錢,還可以更換游戲中的音樂 ...標簽&#x…

Windows 7 資源管理器搜索Channel 9 視頻

在Windows 7 中Federated Search 可以通過OpenSearch 協議訪問到遠程數據資源,也就意味著用戶可以使用資源管理器(Windows Explorer)搜索并瀏覽遠程數據。本篇我們將制作一個搜索連接器(Search Connector)查找Channel …

python django flask介紹_django和flask哪個值得研究學習

對于初學者來說,找到一個好的框架來學習或者項目開發都是非常有必要的,而當你有一定開發經驗后,你應該選擇適合當前業務需要的框架。我這里并不想探討哪個框架好哪個不好,這個永恒的話題就跟探討“世界上哪種編程語言最屌”是一樣…

sts html視圖編輯器,免費的HTML可視化編輯器HBuilder前端開發編輯器 | 老瘋子

互聯網上幾款比較熱門的編輯器Dreamweaver、Notepad、Sublime Text、Vim、Emacs等,這些或許你用過其中之一或許聽說過它們。這些都是國外人員開發的有些甚至被公認為是最受專業程序員喜愛的代碼編輯器(Vim和Emacs)。都是國外的,那國內的呢?當…

css層疊樣式初學

一、css簡介 1、層疊樣式表:疊加效果,不同css對同一html修飾,沖突部分,優先級高作用,不沖突部分,共同作用 2、css作用 (1)修飾html     (2)替代了標簽自身的顏色,字號等屬性,提高…

sum(x) over( partition by y ORDER BY z ) 分析

參考的博文出處:http://www.cnblogs.com/luhe/p/4155612.html,對博文進行了修改新增,修改了錯誤的地方 之前用過row_number(),rank()等排序與over( partition by ... ORDER BY ...),這兩個比較好理解: 先分組&#xff…

sqlserver 日期與字符串之間的轉換

字符轉換為日期時,Style的使用 --1. Style101時,表示日期字符串為:mm/dd/yyyy格式SELECT CONVERT(datetime,11/1/2003,101)--結果:2003-11-01 00:00:00.000 --2. Style101時,表示日期字符串為:dd/mm/yyyy格式SELECT CONVERT(datetime,11/1/2003,103)--結果:2003-01-11 00:00:00…

idea數據庫反向生成實體類_IntelliJ IDEA 的數據庫管理工具實在太方便了

1. 前言對于一個有軟件潔癖的人,能用現有的軟件解決問題的絕不安裝新的軟件。Java后端開發主要跟數據庫打交道,所以數據庫圖形化界面(GUI)是少不了的。通常圖形化操作關系型數據庫(RMDBS)大多數人會選擇Nav…