东京热成人网站_XX另类XX伦理XXAV_亚洲精品无码成人AAA片_高清av中文字幕无码_手机看片国产欧美日韩高清_bd美妙第进化型

咨詢電話:
15628812133
23
2023/09

Yonbuilder-解決在使用滾動(dòng)視圖時(shí)出現(xiàn)的頁(yè)面擠壓?jiǎn)栴}

發(fā)布時(shí)間:2023-09-23 17:14:25
發(fā)布者:MaiMai
瀏覽量:
0

在Yonbuilder中,想要頁(yè)面滾動(dòng)是通過(guò)scroll-view組件定義滾動(dòng)視圖來(lái)完成的。scroll-x屬性代表允許橫向滾動(dòng),scroll-y屬性代表允許豎向滾動(dòng)。在官網(wǎng)中有提醒我們,若需要在垂直方向滾動(dòng),則需要指定高度;若在水平方向滾動(dòng),則需要指定寬度,否則可能無(wú)法顯示。尤其當(dāng)scroll-view中的內(nèi)容不足以撐起整個(gè)頁(yè)面高度的時(shí)候,會(huì)出現(xiàn)下面留白,只能在一段高度內(nèi)滾動(dòng)的情況。

綜上所述,在使用的時(shí)候必須給scroll-view指定一個(gè)具體的高度,但是這個(gè)高度并不好控制。首先頁(yè)面中可能會(huì)有固定不滾動(dòng)的元素,需要減去他們的高度;其次,不同設(shè)備的屏幕分辨率不同,頁(yè)面高度也不同。如果高度設(shè)置大了,會(huì)擠壓到其他不需滾動(dòng)的元素;高度小了則會(huì)留白。如圖:

頁(yè)面擠壓?jiǎn)栴}

留白問(wèn)題

針對(duì)這個(gè)問(wèn)題,一個(gè)好的解決方法就是利用flex布局中的flex-shrink屬性。有關(guān)flex布局的內(nèi)容可以點(diǎn)擊此鏈接>>查看。

flex-shrink屬性定義了項(xiàng)目的縮小比例,如果flex-shrink值為0,表示該項(xiàng)目不收縮。所以我們只需要給固定的元素添加此屬性,就可以防止出現(xiàn)被擠壓的情況。

DOM結(jié)構(gòu)

樣式修改

關(guān)鍵詞:
返回列表