个人中心
gpt4 book ai didi

javascript - Dom 绑定(bind)未在 ionic 内容滚动事件上更新

转载 作者：行者123 更新时间：2023-11-29 21:47:48 24 4
gpt4 key购买 nike

我想在用户向下滚动时做一个进度条。当它一直向下时，条形宽度为 100%。

http://codepen.io/hawkphil/pen/vOyPwN

HTML ionic 列表指令

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MyCtrl">

    <ion-header-bar class="bar-positive">
      <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
      </div>
      <h1 class="title">Ionic Delete/Option Buttons</h1>
      <div class="buttons">
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            Reorder
        </button>
      </div>
      <!--div class="progress" ng-style='{"width": pos.x}'></div-->
      <div class="progress" ng-style='getXObj()'></div>
    </ion-header-bar>

    <ion-content on-scroll="isScrolling()">

      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>

      </ion-list>

    </ion-content>

  </body>
</html>

JS

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicScrollDelegate) {

  $scope.data = {
    showDelete: false
  };

  $scope.edit = function(item) {
    alert('Edit Item: ' + item.id);
  };
  $scope.share = function(item) {
    alert('Share Item: ' + item.id);
  };

  $scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };

  $scope.onItemDelete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };

  $scope.items = [
    { id: 0 },
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 12 },
    { id: 13 },
    { id: 14 },
    { id: 15 },
    { id: 16 },
    { id: 17 },
    { id: 18 },
    { id: 19 },
    { id: 20 },
    { id: 21 },
    { id: 22 },
    { id: 23 },
    { id: 24 },
    { id: 25 },
    { id: 26 },
    { id: 27 },
    { id: 28 },
    { id: 29 },
    { id: 30 },
    { id: 31 },
    { id: 32 },
    { id: 33 },
    { id: 34 },
    { id: 35 },
    { id: 36 },
    { id: 37 },
    { id: 38 },
    { id: 39 },
    { id: 40 },
    { id: 41 },
    { id: 42 },
    { id: 43 },
    { id: 44 },
    { id: 45 },
    { id: 46 },
    { id: 47 },
    { id: 48 },
    { id: 49 },
    { id: 50 }
  ];

  $scope.pos = {x:'21.41982072480742%', xObj: {}};
  $scope.isScrolling = function() {
    console.log($ionicScrollDelegate.getScrollPosition());
    $scope.pos.x = ($ionicScrollDelegate.getScrollPosition().top / 2204 * 100) + '%';
    console.log($scope.pos.x);
    //$scope.getXObj();
  }

  $scope.getXObj = function() {
    console.log({"width": $scope.pos.x});
    return {"width": $scope.pos.x + "%"};
  }

});

CSS

body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.progress {
  height: 2px;
  background: red;
}

我试过两件事:

ng-style='{"width": pos.x}'

和

ng-style='getXObj()'

但没有绑定(bind)在我向下滚动时提供扩展的红色条。

我读过这个问题:

Angular.js ng-style won't bind value

虽然控制台显示正确的百分比值，但我想不通为什么。

知道为什么这行不通吗？

最佳答案

似乎是一个可能的 ionic 错误。它似乎可以在元素的滚动事件上正确调用该函数，但不会调用摘要循环来更新 DOM。

来自 ionic 的片段:

var scrollFunc = function(e) {
    var detail = (e.originalEvent || e).detail || {};
    $scope.$onScroll && $scope.$onScroll({  //<-- Here it gets called but it is outside of angular context
      event: e,
      scrollTop: detail.scrollTop || 0,
      scrollLeft: detail.scrollLeft || 0
    });
  };

  $element.on('scroll', scrollFunc); //event registration

因此，作为一种可能的解决方法，您可以执行 scope.$evalAsync这可能是更安全的选择。

$scope.isScrolling = function() {
    $scope.pos.x = ($ionicScrollDelegate.getScrollPosition().top / 2204 * 100) + '%';
    $scope.$evalAsync(angular.noop);
  }

Demo

关于javascript - Dom 绑定(bind)未在 ionic 内容滚动事件上更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30493021/

24 4 0
文章推荐： javascript - Bx-slider 多个 slider 自定义控件
文章推荐： android - 如何动态地将 View 添加到鳍状肢 View
文章推荐： android - styles.xml 的 AlertDialog 全息强调色
文章推荐： javascript - 我应该如何构建 Firebase 身份验证密码重置流程？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com