Swiper的API及自定义分页器等问题-淘宝触屏版首页制作

移动端页面制作的一些基础问题：

1.使用百分比，vw等相对单位，行高vw无效；

2.学会使用border-box，可以有效避免因为计算不精确，导致出现横向滚动条；

3.媒体查询可以帮助更细致的微调不同分辨率设备下各处细节的展现效果；

4.字库文件的引入可以有效的丰富ico元素（在线引入不推荐 因为自己尝试时 只有自己电脑看有效果 其他电脑没效果 不知道怎么回事），推荐下载后本地引入；

5.别忘了这句移动端最基本却又必备的限制<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

6.swiper的使用，可以有效提高移动端的构建；

7.flex模型在移动端支持比较好，在移动端使用flex可以有效减少开发时间；

8.传统瀑布流多采用浮动式（定死列数）和绝对定位式来写，这里经自己观察淘宝末尾那里图片长宽比固定，故采用flex和js去写，效果还是不错的。最重要的是使用flex加js真的简单容易（列数也会自适应）；

9.swiper常见的api用法及一些常见问题：

（1）横向轮播：direction: 'horizontal'   纵向轮播：direction: 'vertical'；

（2）是否循环播放：loop: true；一般都需要

（3）是否自动播放：autoplay:1000；一般都需要

（4）用户使用后是否停止播放：autoplayDisableOnInteraction : false；一般都需要

（5）需要分页器则加入：pagination: '.gg.swiper-pagination'；加入一个分页器，这里请与初始化时得到的类名保持一致（在多次使用swiper时）

（6）自定义分页器：bulletActiveClass；可以用来更改分页器颜色等，单次使用swiper可以使用默认的类名去更改其属性，如果页面需要多次使用swiper，请自定义它的类