发表于: 2017-06-27 22:13:15

1 926


今天完成的事情:

完成公司详情和在招职位的静态页面的渲染,功能也都基本完成。


明天计划的事情:

把剩余的一些页面跳转完成。

做codeReview


遇到的困难:

       在做分页功能的过程中遇到了一些麻烦,之前用朱英杰使用的插件,不知道是什么原因,插件里面的一个变量一直显示未定义,花了很长的时间都没有解决。然后就开始寻找别的分页插件。后来我看了ui-bootstrap上面的插件做得很不错,因为之前在轮播图中已经引入了一次ui-bootstrap,所以这次就不需要额外引入新的文件。直接照着demo将html渲染出来了

html代码如下

<div class="paging">
<ul uib-pagination first-text="首页" last-text="末页" next-text="下一页" previous-text="上一页"          total-items="vm.bigTotalItems" ng-model="vm.bigCurrentPage" max-size="maxSize" num-pages="numPages" class="pagination-sm" boundary-links="true" force-ellipses="true" ng-change="pageChanged()"></ul>
<div>
跳转至第<input type="number" ng-model="pageNum">
   </div>
<button type="button" class="btn btn-info" ng-click="setPage(pageNum)">确定</button>
</div>

html看起来很多,其实就3行代码,第一行就是翻页,第二行代码是跳转至某页,第三行是个确定按钮。

对于第一行的各种属性,在ui-bootstrap中有详细的介绍,我也就不仔细地说了。

uib分页设置

  • boundary-links Ç (缺省:false -是否显示第一/最后的按钮。

  • boundary-link-numbers $ Ç (默认值:false -是否始终显示第一页和最后一页的数字。如果max-size小于页面数,那么在必要时,第一页和最后一页仍然以中间的椭圆显示。注意:max-size指范围的中心。此选项最多可以在结束值的显示范围的每一侧添加多达两个数字,并且将是省略号,但由数字代替,因为它是顺序的。

  • direction-links $ Ç (缺省:true -是否显示上一个/下一个按钮。

  • first-text Ç (默认值:First -文本的第一个按钮。

  • force-ellipses $ Ç (默认值:false -时,也显示椭圆rotate的真实,max-size比页数小。

  • items-per-page $ C  (默认值:10 -每页的最大项目数目。小于1的值表示一页上的所有项目。

  • last-text Ç (默认值:Last -文本的最后按钮。

  • max-size $  (默认值:null -为分页大小数限制。

  • next-text Ç (默认值:Next -文本为下一步按钮。

  • ng-change $ - 每当页面更改时,可用于调用函数。

  • ng-disabled $  (默认值:false -用来禁用分页组件。

  • ng-model $  - 当前页码。第一页是1。

  • num-pages $ 只读 (缺省:angular.noop -分配的页面来显示的总数量的可选表达式。

  • page-label (默认值:angular.identity -一个可选的表达式来覆盖基于传递当前页面的索引页面的标签。$page在模板中支持页码

  • previous-text Ç (默认值:Previous -文本为上一个按钮。

  • rotate $ Ç (默认值:true -是否保留当前页面可见的人中间。

  • template-url (默认值:uib/template/pagination/pagination.html -覆盖该组件的模板,自定义模板提供

  • total-items $  - 所有页面中的项目总数。

然后html渲染出来后,数据获取又出现了问题,后来发现原来是对ui-bootstrap插件了解还不够深入,后来多看了几遍属性介绍还有相关demo,然后就完成了分页功能。


收获:

学会使用ui-bootstrap写出分页功能,下次自己可以试着写一下,然后封装起来


返回列表 返回列表
评论

    分享到