适用于Windows Phone 8的MobileAngularUI可滚动指令(WP8)

时间:2014-08-14 14:44:06

标签: angularjs cordova angularjs-directive angular-ui angular-ui-bootstrap

我正在使用移动角度UI框架来开发我们的新应用。它在android和ios中运行良好,但在WP8中遇到了一些问题。

我遇到的最大问题是可滚动的类/指令似乎不起作用,所以我似乎无法滚动。

以下是子视图中的一些代码

<div class="scrollable">
    <div class="scrollable-content">
        some content here...
    </div>
</div>

我的index.html页面如下所示

<body>

<div class="sidebar sidebar-left" toggleable parent-active-class="sidebar-left-in" id="mainSidebar">
        <h1 class="app-name">m2i Anywhere</h1>

    <div class="scrollable">
        <div class="scrollable-content">
            <div class="list-group" toggle="off" bubble target="mainSidebar">
                options here...
            </div>
        </div>
    </div>
</div>

<div class="app">

    <!-- Top Navbar -->
    <div class="navbar navbar-app navbar-absolute-top">

        <div class="navbar-brand navbar-brand-center" yield-to="title">
            <span>m2i Anywhere</span>
        </div>

        <div class="btn-group pull-left" yield-to="navbarLeft"></div>

        <div class="btn-group pull-right" yield-to="navbarRight"></div>
    </div>

    <!-- content -->
    <div class="app-body">
        <div ui-view class="app-content"></div>
    </div>
</div>

</body>

2 个答案:

答案 0 :(得分:1)

我对此问题感到困扰了几天,但我终于找到了如下所示的解决方案:

body, html { 
  -ms-overflow-style: none !important; 
}

以下是原始解决方案提案中的示例:https://gist.github.com/tjanczuk/7419485。现场演示在此处托管:http://htmlpreview.github.io/?https://gist.github.com/tjanczuk/7419485/raw/9a13fc9ad43f2103d8b9e23e25c7b0672a13385f/gistfile1.html。您可以使用Windows Phone查看此实时演示以检查滚动性能。祝你好运!

答案 1 :(得分:0)

还可以通过添加.scrollable { position: relative;}

来实现这一目标