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

原创于 2017-05-11 20:11:28 发布 · 6.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端技术

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

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，请自定义它的类名，这样便可以区别设置（注：设置颜色时请将透明度设置为1 本人使用时它默认自带一些透明度）

（7）多次使用swiper初始化时的类名也要区别，请在原有类名上进行叠加，同时别忘了分页器和html中也要做相应更改；

（8）切换效果用effect去设置；常用

以下是本次制作初始化的swiper样本：

var mySwiper = new Swiper ('.gg.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay:1000,
    autoplayDisableOnInteraction : false,//用户使用后是否停止轮播；
    // 如果需要分页器
    pagination: '.gg.swiper-pagination',
    
    bulletActiveClass : 'my-bullet-active1',
    //自定义活动的分页器类名 从而改变分页器颜色等样式；
    // 如果需要前进后退按钮
//   nextButton: '.swiper-button-next',
// prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
//   scrollbar: '.swiper-scrollbar',
  })         
  var youSwiper = new Swiper ('.wz.swiper-container', {
    direction: 'vertical',
    loop: true,
    autoplay:1000,
    autoplayDisableOnInteraction : false,//用户使用后是否停止轮播；
    // 如果需要分页器
    
    
})
  
  var xinSwiper = new Swiper ('.mr.swiper-container', {
    direction:'horizontal',
    loop: true,
    autoplay:1000,
    autoplayDisableOnInteraction : false,//用户使用后是否停止轮播；
    // 如果需要分页器
    pagination: '.mr.swiper-pagination',
    
})  
注：初始化时var这里也要区分的去声明；
瀑布流也贴一下吧...
   var pbl=document.getElementById("pbl");
  var kuandu=document.documentElement.clientWidth;
// alert(kuandu);
function bujv(){
for(var i=0;i<50;i++){

var oimg=document.createElement('img');
oimg.setAttribute('src','pul/'+i+'.jpg')
oimg.style.width=200+'px';
var odiv=document.createElement('div');
odiv.appendChild(oimg);
pbl.appendChild(odiv);
}
}
bujv();

var gaodu=document.documentElement.clientHeight;


window.onscroll=function(){
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var bl=document.documentElement.scrollHeight||document.body.scrollHeight;
if(gaodu+scrolltop>bl*0.8){
bujv();
} 

}

实机测试效果如下：