| 类别 | 说明 |
|---|---|
| 移动 App | 使用安卓/iOS/前端技术开发移动端的应用程序，包含原生App 和混合App |
| 原生 App | 使用安卓的 Java 和 iOS 的 OC 或者 Swift 语言开发出来的应用程序(ReactNative 可以让我们使用前端的技术开发原生App，Vue+Weex,Angular+Ionic,Cordova) |
| 混合 App | 使用前端的技术开发出来的移动端应用程序 |
| 移动 web | 移动端运行在浏览器的网页 |
| webApp | 一般也指移动web,webApp 也可以离线运行(同样也是运行在浏览器中，但是由于有缓存可以离线运行) |
按照接口文档来写ajax请求数据，使用art-template模板引擎渲染数据
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
//原生方法
<% for(var i=0;i<title.length;i++){ %>
<li data-id="<%=id%>">索引:<%=i+1%>:<%=title[i]%></li>
<% } %>
//简单方法
{{each list as value i}}
<li data-id="{{id}}">索引{{i+1}}:{{value}}</li>
{{/each}}
</ul>
</script>
要兼容media query需要引入respond.js
为了让ie浏览器运行最新的渲染模式需加入
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
/*使用zepto实现轮播图*/
$(function () {
/*1.添加首尾两张图片*/
/*2.重新设置图片盒子和宽度和图片的宽度*/
/*3.开启定时器，实现自动轮播*/
/*4.添加移动端的滑动事件，实现手动轮播*/
/*5.添加过渡效果结束之后的监听*/
/*获取轮播图元素*/
var banner = $('.jd_banner')
var bannerWidth = banner.width()
console.log(bannerWidth)
/*获取图片盒子*/
var imgBox = banner.find('ul:first-of-type')
/*获取点标记*/
var indicators = banner.find('ul:eq(1)').find('li')
/*获取首尾两张图片*/
var first = imgBox.find('li:first-of-type')
var last = imgBox.find('li:last-of-type')
/*将两张图片添加到首尾位置 first.clone():将first复制一份*/
imgBox.append(first.clone())
last.clone().insertBefore(first)
/*设置图片盒子的宽度*/
var lis = imgBox.find('li')
var count = lis.length
imgBox.width(count * bannerWidth)
/*设置li标签的宽度*/
lis.each(function (index, value) {
$(lis[index]).width(bannerWidth)
})
/*设置默认偏移*/
imgBox.css('left', -bannerWidth)
/*定义图片索引*/
var index = 1
/*图片轮播的动画效果*/
var imgAnimation = function () {
imgBox.animate({ left: -index * bannerWidth }, 200, 'ease-in-out', function () {
//动画执行完毕之后的回调
/*判断当前索引位置是否是最后一张或者第一张*/
if (index == count - 1) {
//最后张
index = 1
/*让它瞬间偏移到索引1的位置--非过渡*/
imgBox.css('left', -index * bannerWidth)
} else if (index == 0) {
index = count - 2
imgBox.css('left', -index * bannerWidth)
}
/*设置点标记*/
indicators
.removeClass('active')
.eq(index - 1)
.addClass('active')
})
}
/*开启定时器*/
var timerId = setInterval(function () {
index++
/*开启过渡*/
/*设置定位*/
/*在zepto中直接使用animate函数来实现
* 1.需要添加动画效果的样式--对象
* 2.动画的耗时
* 3.动画的速度函数 animation-timing-function
* 4.当前动画执行完毕之后的回调*/
imgAnimation()
}, 2000)
/*添加滑动事件*/
/*左滑动*/
/*在谷歌浏览器的模拟器中，无法正确的触发swipe相关事件，但是可以触发tap事件*/
imgBox.on('swipeLeft', function () {
clearInterval(timerId)
index++
imgAnimation()
})
/*右滑动*/
imgBox.on('swipeRight', function () {
clearInterval(timerId)
index--
imgAnimation()
})
})
/*使用zepto实现轮播图*/
$(function () {
/*1.添加首尾两张图片*/
/*2.重新设置图片盒子和宽度和图片的宽度*/
/*3.开启定时器，实现自动轮播*/
/*4.添加移动端的滑动事件，实现手动轮播*/
/*5.添加过渡效果结束之后的监听*/
/*获取轮播图元素*/
var banner = $('.jd_banner')
var bannerWidth = banner.width()
console.log(bannerWidth)
/*获取图片盒子*/
var imgBox = banner.find('ul:first-of-type')
/*获取点标记*/
var indicators = banner.find('ul:eq(1)').find('li')
/*获取首尾两张图片*/
var first = imgBox.find('li:first-of-type')
var last = imgBox.find('li:last-of-type')
/*将两张图片添加到首尾位置 first.clone():将first复制一份*/
imgBox.append(first.clone())
last.clone().insertBefore(first)
/*设置图片盒子的宽度*/
var lis = imgBox.find('li')
var count = lis.length
imgBox.width(count * bannerWidth)
/*设置li标签的宽度*/
lis.each(function (index, value) {
$(lis[index]).width(bannerWidth)
})
/*设置默认偏移*/
imgBox.css('left', -bannerWidth)
/*定义图片索引*/
var index = 1
/*图片轮播的动画效果*/
var imgAnimation = function () {
imgBox.animate({ left: -index * bannerWidth }, 200, 'ease-in-out', function () {
//动画执行完毕之后的回调
/*判断当前索引位置是否是最后一张或者第一张*/
if (index == count - 1) {
//最后张
index = 1
/*让它瞬间偏移到索引1的位置--非过渡*/
imgBox.css('left', -index * bannerWidth)
} else if (index == 0) {
index = count - 2
imgBox.css('left', -index * bannerWidth)
}
/*设置点标记*/
indicators
.removeClass('active')
.eq(index - 1)
.addClass('active')
})
}
/*开启定时器*/
var timerId = setInterval(function () {
index++
/*开启过渡*/
/*设置定位*/
/*在zepto中直接使用animate函数来实现
* 1.需要添加动画效果的样式--对象
* 2.动画的耗时
* 3.动画的速度函数 animation-timing-function
* 4.当前动画执行完毕之后的回调*/
imgAnimation()
}, 2000)
/*添加滑动事件*/
/*左滑动*/
/*在谷歌浏览器的模拟器中，无法正确的触发swipe相关事件，但是可以触发tap事件*/
imgBox.on('swipeLeft', function () {
clearInterval(timerId)
index++
imgAnimation()
})
/*右滑动*/
imgBox.on('swipeRight', function () {
clearInterval(timerId)
index--
imgAnimation()
})
})
pc端的视口大小就是浏览器的大小 width:100% 流式布局/百分比布局
pc端的视口有一个默认的尺寸 980px pc的页面在移动端会被缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0" />