<div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>
  • 咨詢電話:
    15628812133
    23
    2023/09

    Yonbuilder-解決在使用滾動視圖時出現的頁面擠壓問題

    發布時間:2023-09-23 17:14:25
    發布者:MaiMai
    瀏覽量:
    0

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

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

    頁面擠壓問題

    留白問題

    針對這個問題,一個好的解決方法就是利用flex布局中的flex-shrink屬性。有關flex布局的內容可以點擊此鏈接>>查看。

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

    DOM結構

    樣式修改

    關鍵詞:
    返回列表
    国产办公室秘书无码精品_AV无码天堂AV_A级毛片无码专区免费看
    <div id="q0ue2"></div>
  • <table id="q0ue2"></table>
  • <wbr id="q0ue2"></wbr>
    <div id="q0ue2"><acronym id="q0ue2"></acronym></div>