发表于: 2017-05-14 23:47:20
1 970
今日完成:
调整轮播图的逻辑,逻辑与思路已经想好了,这时后台的轮播数据突然只有3个了。。。没办法实现轮播。于是只有等明天来测试。
明日计划:
完成轮播、最新职位、推荐职位页面的js代码。
问题:
之前写轮播都是copy的代码,这次换个思路,在bootstrap轮播的基础上修改。我的思路是:
首页轮播要求每次显示四个数据,那我就将每此轮播的数组都设为不一样:
1.bootstrap轮播是放在
<div class="item">
里的。
我在item中放入要轮播的项目,并添加 ng-repeat:
<div class="item active"><div ng-repeat="x in'轮播数据源的数组' track by $index | limitTo: 4">
要轮播的项目
</div>
这样就保证每页只有四个数据。
2.在js代码中操作dom,首先判断 轮播数据源的数组 长度,当长度大于4,就复制 轮播数据源的数组,然后将 复制的数组 前四个元素复制并添加到数组的最后,同时删除这前四个元素;
同时操作dom,复制并添加:
<div class="item"><div ng-repeat="x in'复制的数组' track by $index | limitTo: 4">
要轮播的项目
</div>
3.将以上操作放入for循环,当 Math.ceil(轮播数据源的数组.length/4) = 操作dom次数。跳出循环。
4.将以上操作放入指令。
思路大概是这样,明天前台数据恢复了再去测试。
收获:
对数组和指令的操作更熟悉。
评论