分页展示数据

需求要求：

HTML部分：

     <!--利益演示表详情-->

<ion-content delegate-handle="contentScroll" style="background: #f5f5f5;" overflow-scroll="true">

     <div ng-show="step == 3" style="background: #f6f5f5; height: 100%; width: 100%;">
        <div>
            <div id="RatePicker" class="weui-cell" style="margin-top: 20px;">
                <div class="weui-cell__bd g-arrows4 " style="height:100%;">
                    <div ng-click="openRatePicker()" class="fake-input"
                        ng-style="insureParams.currentRate ? {} : {color: '#aaaaaa'}"
                        style="height:100%;text-align: center; font-size: 16px !important;">
                        {{rateMap[insureParams.currentRate]}}
                    </div>
                </div>
            </div>
        </div>
        <!-- 表格 -->
        <div style="overflow:auto;height:100%;" class="yxTable">       //红色背景为滚动表格的两个决定性属性和样式
            <table style="text-align:center;height:83%;">
                <tr style="color: #999;">
                    <td style="min-width:70px;">保单年龄</td>
                    <td style="min-width:70px;">累计保费</td>
                    <td style="min-width:90px;">累计生存金</td>
                    <td style="min-width:70px;">现金价值</td>
                    <td style="min-width:70px;">身故保障</td>
                    <td style="min-width:70px;">万能账户累计演示</td>
                    <td style="min-width:145px;">生存总价值(现价+万能账户价值)</td>
                </tr>
                <tr ng-repeat="item in ageArrShow track by $index">
                        <td>{{ageArrShow[$index]}}周岁</td>
                        <td>{{dataArr.allPremiumJ[ageArrShow[$index]] ? dataArr.allPremiumJ[ageArrShow[$index]] : '-'}}</td>
                        <td>{{dataArr.SBK_sum[ageArrShow[$index]] ? dataArr.SBK_sum[ageArrShow[$index]] : '-'}}</td>
                        <td>{{dataArr.cashValue[ageArrShow[$index]] ? dataArr.cashValue[ageArrShow[$index]] : '-'}}</td>
                        <td>{{dataArr.deathCash[ageArrShow[$index]] ? dataArr.deathCash[ageArrShow[$index]] : '-'}}</td>
                        <td ng-if="rateFlag==0">{{dataArr.json1[ageArrShow[$index]] ? dataArr.json1[ageArrShow[$index]] : '-'}}</td>
                        <td ng-if="rateFlag==0">{{dataArr.CashAll1[ageArrShow[$index]] ? dataArr.CashAll1[ageArrShow[$index]] : '-'}}</td>
                        <td ng-if="rateFlag==1">{{dataArr.json2[ageArrShow[$index]] ? dataArr.json2[ageArrShow[$index]] : '-'}}</td>
                        <td ng-if="rateFlag==1">{{dataArr.CashAll2[ageArrShow[$index]] ? dataArr.CashAll2[ageArrShow[$index]]: '-'}}</td>
                        <td ng-if="rateFlag==2">{{dataArr.json3[ageArrShow[$index]] ? dataArr.json3[ageArrShow[$index]] : '-'}}</td>
                        <td ng-if="rateFlag==2">{{dataArr.CashAll3[ageArrShow[$index]] ? dataArr.CashAll3[ageArrShow[$index]] :'-'}}</td>
                </tr>
            </table>
        </div>
    </div>
</ion-content>

　　JS：

 //查看利益演示表详情
        $scope.toFlag3 = function () {
            $scope.step = 3;
            if( !$scope.insureParams.currentRate){
                $scope.insureParams.currentRate = $scope.rateList[0].value;
            }
            $scope.ageArrShow = $scope.ageArr.slice(0,10);
        }

        // 利益演示表的上下页按钮
        $scope.start = 0;
        $scope.num = 0;
        $scope.toNextPage = function () {
            if ($scope.num < Math.ceil((104 - Number($scope.insureParams.BBRS[0].age)) / 10) - 1) {    //重点
                $scope.num++;
                $scope.start += 10;
            }
            $scope.ageArr = [];     //存放利益演示表的所有数据
            $scope.ageArrShow = [];    //展示在页面的数据
            for (var a = $scope.insureParams.BBRS[0].age + 1; a < 106; a++) {
                $scope.ageArr.push(a);
            }
            $scope.ageArrShow = $scope.ageArr.splice($scope.start, 10);
        }
        $scope.toLastPage = function () {
            if ($scope.num <= 0) {
                $scope.start = 0;
            } else {
                $scope.num--;
                $scope.start -= 10;
            }
            $scope.ageArr = [];     //存放利益演示表的所有数据
            $scope.ageArrShow = [];    //展示在页面的数据
            for (var a = $scope.insureParams.BBRS[0].age + 1; a < 106; a++) {
                $scope.ageArr.push(a);
            }
            $scope.ageArrShow = $scope.ageArr.splice($scope.start, 10);
        }

　　CSS部分：

.g-arrows4:after {

  content: " ";

  display: inline-block;

  height: 10px;

  width: 10px;

  border-width: 2px 2px 0 0;

  border-color: #c8c8cd;

  border-style: solid;

  -webkit-transform: matrix(.71, .71, .71, -.71, 0, 0);     //用伪元素画三角    前四个值的正负组合表示左上右下四个朝向，大小不变

  transform: matrix(.71, .71, .71, -.71, 0, 0);

  position: absolute;

  top: 39%;

  left: 62%;

  margin-top: -4px;

}

.yxTable table tr :first-child{

  background-color: #F6F9FF;

  /* #F6F9FF */

}

.yxTable table tr td{

  vertical-align: middle;

}