微信小程序之scroll-view橫向滾動不能顯示

之前在寫scroll-view(可滾動視圖區域)遇到一個問題,花一點時間記錄分享一下,豎向滾動視圖沒什麼大問題,只需要設置height:rpx; 滾動高度區域,然而橫向滾動區域就需要注意兩個問題了。

(一)實現效果

實現效果

(二)注意設置兩個屬性

一開始以爲只要照着微信官方的文檔介紹就可以想怎麼寫就怎麼寫了,結果一直調試不出來,按照官方介紹的屬性設置了,子元素容器會各佔一行,而且,父元素容器會內容換行,試了很多CSS屬性,才發現需要設置的兩個屬性就可以了:

1、display:inline-block; 設置子元素容器爲行間模塊:

解釋一下display的幾個常用的屬性值,inline , block, inline-block

inline:(1) 使元素變成行內元素,擁有行內元素的特性,即可以與其他行內元素共享一行,不會獨佔一行.
(2)不能更改元素的height,width的值,大小由內容撐開.
(3)可以使用padding,margin的left和right產生邊距效果,但是top和bottom就不行.

block:(1)使元素變成塊級元素,獨佔一行,在不設置自己的寬度的情況下,塊級元素會默認填滿父級元素的寬度.
(2)能夠改變元素的height,width的值.
(3) 可以設置padding,margin的各個屬性值,top,left,bottom,right都能夠產生邊距效果.
inline-block: 結合了inline與block的一些特點,結合了上述inline的第1個特點和block的第2,3個特點.
用通俗的話講,就是不獨佔一行的塊級元素。詳細說明可以查看這篇文章

子元素容器

2、設置父元素容器white-space: nowrap;容器不換行顯示:
父元素容器

如果還有遇到的其他問題,歡迎留言交流。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章