Question

我正在尝试在mdVirtualRepeat上使用mdInkRipple指令，但我遇到的问题是md-ink-ripple会波动整个虚拟重复容器。这是我的代码。

<md-virtual-repeat-container md-auto-shrink="true">
    <div md-virtual-repeat="obj in controller.data" ng-click="null" md-ink-ripple>
        <div class="key-repeated" layout="column" layout-align="center start">
            <p class="md-title" style="margin-bottom: 0px;">{{ obj.text }}</p>
            <p class="md-body-1">{{ obj.caption }}</p>
        </div>
    </div>
</md-virtual-repeat-container>

Answer 1

一种选择是引入md-list作为md-virtual-repeat-container的父级，并让其子级md-list-item - CodePen

标记

<md-content layout="column">
  <md-list>
    <md-virtual-repeat-container id="vertical-container">
      <md-list-item md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="" md-ink-ripple>
        {{item}}
      </md-list-item>
    </md-virtual-repeat-container>
  </md-list>
</md-content>

此外，如果md-list-item具有ng-click属性，则 md-ink-ripple 默认存在（并且鼠标效果也很好） - {{3} }

标记

<md-content layout="column">
  <md-list>
    <md-virtual-repeat-container id="vertical-container">
      <md-list-item md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="" md-ink-ripple  ng-click="hello()">
        {{item}}
      </md-list-item>
    </md-virtual-repeat-container>
  </md-list>
</md-content>

JS

.controller('AppCtrl', function($timeout, $scope) {
    $scope.hello = function() {
      console.log("Hello!");
    }

CSS

.virtualRepeatdemoDeferredLoading .repeated-item {
  height: initial;
}

mdInkRipple涟漪整个mdVirtualRepeat - Angular Material

1 个答案: