Question

我正在使用Ionic Framework为Android开发移动应用程序。

我的问题是我需要在随机位置有一个容器列表，并且可以点击。

容器列表在随机位置正确显示，但点击区域仅在我单击视图顶部时才起作用，而不是在位置本身。

点击在移动浏览器中的正确位置正常工作，但当我在Android中将该应用作为本机应用程序运行时，点击混乱了。

点击顶部的点击区域似乎，是否有人知道造成这种情况的原因？

代码在这里：

HTML文件

<div class="col" ng-model="qtablelayout">
        <div qtable ng-model='qtable' ng-repeat='qtable in qtablelayout.qtables' class="tablediv" ng-class="qtable.tstatus" ng-style="{'left': {{qtable.x}}+'px', 'top':{{qtable.y}}+'px'}" ng-click="tblActions(qtable)">
            <h2>{{qtable.tableNo}}</h2>
            <ul>
                <li class="tablesize">{{qtable.currentHP.qsize}}/{{qtable.maxSize}}</li>
                <li class="tabletime">{{qtable.tabletime.hours}}h {{qtable.tabletime.mins}}m {{qtable.tabletime.secs}}s</li>
            </ul>
        </div>
    </div>

CSS文件

div.tablediv
{
    position: absolute;
    background: url("../img/table/tablestatus.png") no-repeat;
    color: #fff !important;
    width: 178px;
    height: 178px;
    padding: 0;
    margin: 0;
    text-align: center;
    display: block;
    overflow: hidden;
}

控制器端

$scope.tblActions = function(m)
    {
        alert("x:" + m.x + ",y:" + m.y);
    }

Answer 1

我发现问题的原因是我在容器列表之前有一个离子清新剂，它似乎已经将点击区域与离子清新剂的空间一起向上移动。

当我将Ion-Refresher放在HTML的底部时，它起了作用。

AngularJS ng-点击移动设备在错误的位置点火

1 个答案: