在項目開發中遇到一個關於scroll-view的的問題,具體如下:
項目要求是橫向滾動,由於直接在scroll-view組件設置display:flex不生效,因此考慮直接在scroll-view下增加一個wrap,將所有的item放在wrap內,
將wrap設置為display:flex,這種方式在安卓手機不會導致任何問題,在蘋果手機樣式也不會有什么問題,但是當item的個數較多導致超出一屏,scroll-view
滑動觸底或者觸頂就會導致頁面抖動。解決方案如下:
sroll-view組件直接包裹item, 注意以下兩點:
- 一定要將scroll-view容器設置寬度,並設置white-space: nowrap;
- 一定要將scroll-view容器的每一項(item)都設置寬度和display:inline-block
也可以在item內再套一層,使用flex布局。
至此,問題解決。
