zoukankan      html  css  js  c++  java
  • angular的豆瓣分页

    //console.log($routeParams.movieType);
    //一共有多少页
    console.log($routeParams.page);
    //显示加载动画
    $scope.isLoading = true;
    // 每页有多少条数据 用大写字母来表示 固定的值
    var COUNT = 5;
    //通过路由参数 获取当前页 当前页
    var curPage = ($routeParams.page || '1') - 0;//忽略就是第一页 -0 妆花为数字
    // 暴露给视图使用
    $scope.curPage = curPage;

    // start值 :
    // 需要根据页码(curPage) 以及页多少CONUT 计算start 值
    // 第一页: 0 1 2 3 4
    // 第二页: 5 6 7 8 9
    // 第三页: 10 11 12 13 14
    // ...
    // 第 n页: ( curPage - 1 ) * COUNT

    var startNum = (curPage -1 )*COUNT;

    //分页功能
    $scope.goPage = function (currentPage) {
    //判断第一页不能再减,大于总页数不能再加
    if(currentPage < 1 || currentPage > $scope.totalPage) {
    return;
    }



    // currentPage 就表示当前的页码,就是要根据当前页码获取指定的数据
    // 只需要让url 中的值发生改变,那么控制器中的代码就会重新执行

    //只要重新执行就能够获取到当前页码并且发送请求获取数据!!!!

    //需要另外注入一个服务$route
    //通过修改路由参数来实现的分页功能
    //调用 updateParams 方法,更新路由参数
    $route.updateParams({page:currentPage})
    }//page是路由的参数 参数变化了,控制器的代码就会重新执行
    //那边的接口也是/coming_soon /in_theaters /top250
    //根据不同的路由,请求不同的接口,获取相应的数据
    JsonpSrv.jsonp('https://api.douban.com/v2/movie/' + $routeParams.movieType, {
    start: startNum,
    count: COUNT,
    q:$routeParams.q
    //q就传路由的q参数
    }, function( data ) {
    // 在回到函数中获取到 jsonp 返回的数据
    console.log(data);
    $scope.movieList = data;
    //没有效果
    //因为发送 jsonp 请求是一个异步操作,异步操作是不会被出发angular的双向绑定机制的
    //需要手动触发angular的双向绑定机制,触发该机制,将数据的变化映射到视图中

    //计算有多少页

    $scope.totalPage = Math.ceil(data.total / COUNT) ;

    //隐藏加载动画效果
    $scope.isLoading = false;

    $scope.$apply();
    });
    }])
    //=================html部分====================//
    <div class="paging">
    <label>总共:{{ movieList.total }}条记录,第{{ curPage }}/{{ totalPage }}页;</label>
    <!-- 加上disable类样式,表示按钮禁用状态 -->
    <button class="prev" ng-class="{disable: curPage <= 1}" ng-click="goPage(curPage-1)">上一页</button>
    <button class="next" ng-class="{disable: curPage >= totalPage}" ng-click="goPage(curPage -0 +1)">下一页</button>
    </div>
  • 相关阅读:
    解析SparkStreaming和Kafka集成的两种方式
    不可不知的资源管理调度器Hadoop Yarn
    linux系统层面调优和常见的面试题
    OpenLayer加载百度坐标偏移问题解决(方案二)
    LeaFlet之GeoJson类介绍
    OpenLayer加载百度坐标偏移问题解决(方案一)
    LeaFlet迁徙图的制作
    OpenLayer4与mapV结合蜂巢图效果
    ArcGIS API For JS 实现右键菜单栏的功能
    OpenLayer4结合高德地图API实现交通态势的获取信息
  • 原文地址:https://www.cnblogs.com/fdxxiaobai/p/7589373.html
Copyright © 2011-2022 走看看