angularjs – Ionic – 禁用以编程方式在单个离子项上滑动

发布时间：2020-12-17 17:45:40 所属栏目：安全来源：网络整理

导读：我有一个包含离子项的离子列表. can-swipe在各个项目上设置为true.我将其切换为false以尝试禁用对项目的滑动,但这并没有禁用滑动(这是我的第一个测试,看看我是否可以将条件挂钩到can-swipe属性). 我如何禁用某些项目,因为can-swipe =“false”不是这样做的？

我有一个包含离子项的离子列表. can-swipe在各个项目上设置为true.我将其切换为false以尝试禁用对项目的滑动,但这并没有禁用滑动(这是我的第一个测试,看看我是否可以将条件挂钩到can-swipe属性).

我如何禁用某些项目,因为can-swipe =“false”不是这样做的？

<ion-list show-reorder="data.showReorder">
    <ion-item ng-repeat="i in items track by $index" class="item item-remove-animate"
        can-swipe="true" ng-click="manageOption($index);">
        <b>{{i.Name}}</b>
    <ion-option-button class="button-assertive" ng-click="deleteOption($index);">
        Delete
    </ion-option-button>
    <ion-reorder-button class="ion-navicon" on-reorder="moveOption(o,$fromIndex,$toIndex)"></ion-reorder-button>
    </ion-item>
</ion-list>

解决方法

我需要这个用于我的应用程序,并且我能够使用CSS类来覆盖item-content元素的转换,该元素作为子项动态添加到ion-item.

我的模板中有以下内容：

<ion-item collection-repeat="report in dashboardReports" ng-class="isSwipeable(report.id)">
  <p>Some content</p>
  <ion-option-button ng-click="itemButton(report.id)">
</ion-item>

然后在我的控制器中我有这个：

$scope.lockedItems = []

$scope.itemButton = function(id) {
  $scope.lockedItems.append(id)
}

$scope.isSwipeable = function (id) {
  if ($scope.lockedItems.indexOf(id) !== -1) {
    return 'swipe-disabled';
  } else {
    return true;
  }
};

然后在我的CSS中,我重写滑动动画,如下所示：

.swipe-disabled div.item-content {
    -webket-transition: none !important;
    -webket-transform: none !important;
    transform: none !important;
}

我觉得这有点像hacky,但Eder的解决方案对我不起作用而且Ion还不支持.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!