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，请自定义它的类名，这样便可以区别设置（注：设置颜色时请将透明度设置为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.οnscrοll=function(){
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var bl=document.documentElement.scrollHeight||document.body.scrollHeight;
if(gaodu+scrolltop>bl*0.8){
bujv();
} }

实机测试效果如下：

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

自定义View之仿淘宝详情页
自定义View之仿淘宝详情页转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...
淘宝店铺发布API接口（新），淘宝oAuth2.0店铺商品API接口，淘宝商品发布API接口，淘宝商品上架API接口，一整套发布上架店铺接口对接分享
淘宝店铺发布API接口(新),淘宝oAuth2.0店铺商品API接口,淘宝商品发布API接口,淘宝商品上架API接口,一整套发布上架店铺接口对接分享如下 1.公共参数名称类型必须描述 key ...
淘宝api开放平台SDK调用对接淘宝商品详情
以下是获得淘宝商品详情 API 返回值说明.简单调用示例. 需要更多了解和测试调用请移步 http://console.open.onebound.cn/console/?i=Turbo 如果在淘宝/ ...
淘宝/天猫、1688、京东API接口—item_search - 按关键字搜索淘宝商品
为了进行此平台API的调用,首先我们需要做下面几件事情. 1. 获取一个KEY. 2. 参考API文档里的接入方式和示例. 3.查看测试工具是否有需要的接口,响应实例的返回字段是否符合参数要求. 4. ...
淘宝api开放平台SDK调用对接淘宝或天猫
如果在淘宝/天猫上开了网店,用户自己也有一套自己的管理平台,这时可能会考虑和淘宝进行数据对接.这就需要考虑调用阿里提供的开发接口来推送和接收数据. 对接的方式有2种,一种是通过http接口,另外一种是 ...
淘宝/天猫API：item_search_pro-高级关键字搜索淘宝商品
万邦淘宝/天猫高级关键字搜索淘宝商品 API 返回值说明 item_search_pro-高级关键字搜索淘宝商品 onebound.taobao.item_search_pro 公共参数请求地址: ...
API简介，如何运用API接口获取商品数据（淘宝/天猫、1688、拼多多、京东等二十多个海内外电商平台）
API:应用程序接口(API:Application Program Interface) 应用程序接口是一组定义.程序及协议的集合,通过 API 接口实现计算机软件之间的相互通信.API 的一个主要 ...
淘宝API接口：item_search_img - 按图搜索淘宝商品（拍立淘）和 upload_img - 上传图片到淘宝
今天主要是拍立淘图片搜索接口,以图搜物,搭配上传图片到淘宝接口一起使用. 淘宝的API开发接口,我们需要做下面几件事情. 1)开放平台注册开发者账号: 2)然后为每个淘宝应用注册一个应用程序键(App ...
记淘宝客、多多客api开发系列。一、淘宝联盟淘宝客api对接
现在市面上较多.也较赚钱的就是开群拉人,然后在群里发高佣商品链接,群员下单后就可获得佣金,由于是淘宝客相对主动(类似行商),潜伏在他们群里,看到效果还不错. 但背后付出成本也不小,群要提防被封.防止群 ...

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

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

最新文章

热门文章