HTML + JavaScript 学习Metro程序 (3) - ListView + AppBar

最新推荐文章于 2020-06-11 18:51:22 发布

zj510

最新推荐文章于 2020-06-11 18:51:22 发布

阅读量3k

点赞数

分类专栏： Windows 8

本文链接：https://blog.csdn.net/zj510/article/details/8182742

版权

本文介绍如何处理ListView在AppBar显示时被遮挡的问题。通过响应AppBar的beforeshow和beforehide事件，动态调整ListView的高度，确保内容可见。通过示例代码展示了解决方案，并解释了其工作原理。

摘要由CSDN通过智能技术生成

AppBar大量的Metro应用里面使用，那么这里有一个很基本的问题：AppBar需要在屏幕中占用一定的空间。那么会不会当AppBar显示的时候，某些东西被AppBar盖住了呢？

比如，应用里面有个listview，这个listview的底部接近屏幕的底部，那么当AppBar显示的时候，listview底部的一部分会被AppBar盖住，从而使得用户无法看到那部分东西，这显然是一个很不好的现象。MSDN上专门有一个页面来描述这个问题，http://msdn.microsoft.com/zh-cn/library/windows/apps/jj649138.aspx。这也说明这是个普遍问题。

其实解决这个问题的关键在于AppBar的2个消息：beforeshow和beforehide。

在AppBar显示前，把ListView的高度缩小一点，在AppBar隐藏前，将ListView的高度恢复到原始高度。

先来看看HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>pagecontrol</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/pagecontrol.css" rel="stylesheet" />
    <script src="/js/pagecontrol.js"></script>
    <script src="/js/appbar.js"></script>

</head>
<body>
    <!-- Full screen container for ListView -->
    <div id="scenarioFullscreen">
        <header style="text-align:center;margin-top:80px">Test listview + appbar</header>
        <section style="height:720px;margin-top:40px">
            <div id="scenarioListView" style="height:100%"
                data-win-control="WinJS.UI.ListView"
                data-win-options="{ itemTemplate: smallListIconTextTemplate, selectionMode: 'multi', tapBehavior: 'toggleSelect', swipeBehavior: 'select', layout: { type: WinJS.UI.ListLayout, maxRows: 100 },itemDataSource : DataExample.itemList.dataSource }" >
            </div>
        </section>
    </div>    
    <!-- AppBar with contextual commands for a ListView -->
    <!-- BEGINTEMPLATE: Template code for AppBar -->
    <div id="scenarioAppBar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',extraClass:'singleSelect',tooltip:'Add item'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'selection',extraClass:'ContextRelated',tooltip:'Select All'}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'selection',extraClass:'ContextRelated',tooltip:'Clear Selection'}"></button>
        <hr     data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'selection',extraClass:'ContextRelated'}" />
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'selection',extraClass:'ContextRelated',tooltip:'Delete item'}"></button>
    </div>
    <!-- ENDTEMPLATE --> 
    
</body>
</html>

简单的加了一个ListView和一个AppBar。ListView是一个非常有用，也非常灵活的控件，具体可以参考：http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465465.aspx

这里就是一个简单应用。

最低0.47元/天解锁文章

zj510

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML + JavaScript 学习Metro程序 (3) - ListView + AppBar

AppBar大量的Metro应用里面使用，那么这里有一个很基本的问题：AppBar需要在屏幕中占用一定的空间。那么会不会当AppBar显示的时候，某些东西被AppBar盖住了呢？比如，应用里面有个listview，这个listview的底部接近屏幕的底部，那么当AppBar显示的时候，listview底部的一部分会被AppBar盖住，从而使得用户无法看到那部分东西，这显然是一个很不好的现象。M
复制链接

扫一扫

专栏目录