如何制作离子列表使用$ ionicScrollDelegate在按钮点击时使用angularjs按像素位置滚动？

Question

在按像素位置滚动研究后，我成功编写了代码并且正常工作

<ion-tab>
<ion-nav-view>
<ion-content delegate-handle="Scroll1"  overflow-scroll="false" >
            <div>
              <div class="row" collection-repeat="dataitem in Data" >
                <div class="col" style="margin:6px 4px !important">{{dataitem.DATE | date:'MMM/dd/yyyy'}} </div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.TIME | date: "HH:mm:ss"}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.NAME}}</div>
                <div class="col" style="margin:6px 4px !important;">{{ dataitem.ADDRESS | limitTo: limitToValue }}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.AMOUNT | currency | bracketless}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.BALANCE|currency}}</div>
              </div>
            </div>
</ion-content>
</ion-nav-view>
</ion-tab>

Answer 1

在您的html文件

中

<ul class="page-scroll-buttons">
      <li>
        <i class="fa fa-arrow-circle-down"  ng-click="scrollDownBtn();"></i>
      </li>
      <li>
        <i class="fa fa-arrow-circle-up" ng-click="scrollUpBtn()"></i>
      </li>
        </ul>

<ion-tab>
<ion-nav-view>
<ion-content delegate-handle="Scroll1"  overflow-scroll="false" >
            <div >
              <div class="row" collection-repeat="dataitem in Data" >
                <div class="col" style="margin:6px 4px !important">{{dataitem.DATE | date:'MMM/dd/yyyy'}} </div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.TIME | date: "HH:mm:ss"}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.NAME}}</div>
                <div class="col" style="margin:6px 4px !important;">{{ dataitem.ADDRESS | limitTo: limitToValue }}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.AMOUNT | currency | bracketless}}</div>
                <div class="col" style="margin:6px 4px !important;">{{dataitem.BALANCE|currency}}</div>
              </div>
            </div>
</ion-content>
</ion-nav-view>
</ion-tab>

在您的controller.js文件中

var t;
$scope.scrollDownBtn = function (){         
                t=  $ionicScrollDelegate.$getByHandle("Scroll1").getScrollPosition();
                $ionicScrollDelegate.$getByHandle("Scroll1").scrollTo(0, t.top+80, true);

                };

$scope.scrollUpBtn = function () {
           t=  $ionicScrollDelegate.$getByHandle("Scroll1").getScrollPosition();
           $ionicScrollDelegate.$getByHandle("Scroll1").scrollTo(0, t.top-80, true);
               };