发表于: 2017-05-14 23:47:20

1 969


今日完成:

调整轮播图的逻辑,逻辑与思路已经想好了,这时后台的轮播数据突然只有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.将以上操作放入指令。

思路大概是这样,明天前台数据恢复了再去测试。

收获:

对数组和指令的操作更熟悉。


返回列表 返回列表
评论

    分享到