发表于: 2017-02-12 03:35:12

1 1213


今天做的事

今天完成了首页的轮播图

明天计划

完成一个一个滑动的轮播图,把内容改成请求过来的数据

收获

轮播图使用的uib的插件

由于开始学习uib的时候是直接在官网上有个plunker,点进去可以清晰看到demo的html和js

于是就直接拉下来学,而后在完成后开始做这个task的时候发现uib一直无法依赖,也不报错,卡了一段时间

后来发现是连错了,只练了这一条,没有下面那个,改成下面那个就好了

<script src="//cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>

//cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js

由于实际项目中,轮播图的内容不是几个单纯的图片,于是第一个小难点出现了

先确认了每个小div都是一个对象,每个显示的板块就是包含这些对象的数组,而轮播的内容是大的数组

开始并没有请求数据,而是先给了一个假数组做尝试

于是就是【  【obj,obj,obj,obj】,【obj,obj,obj,obj】,【obj,obj,obj,obj  】这样的形式,自然要repeat两次

我开始想怎么把最初的【obj,obj,obj,obj,,,,】切成每四个一组呢,想到就是for循环,然后条件里(i=0;i<length;i+4)

结果一值打不开,好容易打开一次f12发现那个循环变成了死循环,页面自然卡死了,后来改成i=i+4就好了

时间原因为什么i+4不可以明天白天查一下

轮播图方面,布局和样式写好内容repeat

一直做到基本功能实现没问题后改轮播图样式,直接看bootstrap的less找样式,然后写新的覆盖样式就可以

经二大知道要让他上下滑动,更改他的这个部分就好,其中三个参数依次为x,y,z轴,改中间的就好

transform: translate3d(0, -100%, 0);

一个一个滑动的轮播图还没做,改样式改了挺久

目前想法是,让轮播图显示的部分变大,每次可以多显示几个,然后滑动的时候也许就可以实现一个一个滑动了

或者看下能否通过css样式改变它每次滑动位移不是100%,而是25%来实现,明儿都试试吧

困惑如收获

轮播图那里,一定要给显示的div固定宽或者高,不然每次滑动的时候他都会在华东瞬间宽度高度变一下

显示出来的效果就好像轮播图是跳着动的,这里需要注意下,横着划的width一定要有,y轴划的height一定要有





返回列表 返回列表
评论

    分享到