温泉用户界面 - 列表大小调整

Onsen UI - list resize

本文关键字：调整 列表 用户界面 温泉      更新时间：2023-09-26

我正在做一个基于科尔多瓦和温泉UI的移动应用程序。我的 html 页面分为 3 个部分。第一个是聊天框，它占据了屏幕的35%。然后我有一个列表（ons-list），我想填充屏幕的 40%，最后我有一个文本框和一个按钮，填充屏幕的 25%，两者都有。

我的问题是我无法根据移动屏幕分辨率调整列表及其列表项的大小。

我的想法是我希望应用程序在不滚动的情况下填满整个屏幕。

有什么帮助吗？谢谢

<ons-template id="Main.html">
        <ons-page id="homepage">
            <ons-navigator var="myNavigator">
                <ons-toolbar id="topBar" fixed-style>
                    <div class="center"><font size="5">Main</font></div>
                    <div class="left">
                        <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
                    </div>
                </ons-toolbar>
                <ul id="conversationBox" class="ChatLog"></ul>
                <script>
                    //localStorage.clear();
                    //fillConversationBox();
                </script>
                <ons-list>
                    <ons-list-header>Messages</ons-list-header>
                    <ons-list-item class="list-item-container" modifier="chevron" onclick="myNavigator.pushPage('mensagens_predefinidas1.html');">
                        <ons-row>
                            <ons-col class="colImg">
                                <img class="thumbnail img_crop" src="images/ambulance48.png">
                            </ons-col>
                            <ons-col class="text_col">
                                Item 1
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                    <ons-list-item class="list-item-container" modifier="chevron" onclick="myNavigator.pushPage('mensagens_predefinidas2.html');">
                        <ons-row>
                            <ons-col class="colImg">
                                <img class="thumbnail img_crop" src="images/police48.png">
                            </ons-col>
                            <ons-col class="text_col">
                                Item 2
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                    <ons-list-item class="list-item-container" modifier="chevron" onclick="myNavigator.pushPage('mensagens_predefinidas3.html');">
                        <ons-row>
                            <ons-col class="colImg">
                                <img class="thumbnail img_crop" src="images/firetruck48.png">
                            </ons-col>
                            <ons-col class="text_col">
                                Item 3
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                    <ons-list-item class="list-item-container" modifier="chevron" onclick="myNavigator.pushPage('minhas_mensagens.html');">
                        <ons-row>
                            <ons-col class="colImg">
                                <img src="images/mymsgs.png" class="thumbnail">
                            </ons-col>
                            <ons-col class="text_col">
                                Item4
                            </ons-col>
                        </ons-row>
                    </ons-list-item>
                </ons-list>
                <div align="center" style="margin-bottom: 2%;margin-top: 4%; position: absolute; left: 0; right: 0;bottom: 0;">
                    <textarea id="messageTxtSend" rows="3" style="resize: none" placeholder="Introduzir mensagem"></textarea>
                    <button id="btnSend" class="button button--cta">Enviar</button>
                </div>
            </ons-navigator>
        </ons-page>
    </ons-template>

首先，我想说的是，如果有很多单元格，使内容不可滚动并调整高度可能不是一个好主意，因为那样元素可能会在小型手机上变得不可读。话虽如此，这是解决方案：

我 https://jsfiddle.net/philolo1/m4gdu5s0/15/为你创建了一个jsfiddle。

第一个技巧是使用flexbox（flexbox.io/）：列表的父级设置为"display：flex"，所有孩子都有相同的高度"flex：1"。这是 html 文件：

<body> 
    <ons-page>
        <ons-toolbar modifier="material">
            <div class="center">Adjustable Height</div>
        </ons-toolbar>
        <div style="height: 35%; background: green;"></div>
        <ons-list  style="display: flex; flex: 1; flex-direction: column; height: 40%; background: blue;">
            <div id="container" style=" flex: 1; border: solid; border-color: white;"> 
                <ons-list-item class="myItem"> Text 1 </ons-list-item> 
            </div>
            <div id="container" style=" flex: 1; border: solid; border-color: white;"> 
                <ons-list-item class="myItem"> Text 2 </ons-list-item> 
            </div>
            <div id="container" style=" flex: 1; border: solid; border-color: white;"> 
                <ons-list-item class="myItem"> Text 3 </ons-list-item> 
            </div>
        </ons-list>
        <div style="height: 25%; background: red;"></div>
    </ons-page>
</body>

在Javascript中，需要更新列表项的css属性以将其设置为适当的高度（以及字体和其他元素）。 

ons.ready(function() {
    var fontSize = parseInt($("#container").height() *0.8)+"px";
    $(".myItem").css('min-height', 0);
    $(".myItem").css('line-height', fontSize);
    $(".myItem").css('font-size', fontSize);
});
相关文章：