13518219792
使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了，意味着你可以设计更好的app而不需要很强的用户体检设计背景，而且让你可以更容易实现这些模式。
创新互联公司-专业网站定制、快速模板网站建设、高性价比肃南裕固族自治网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式肃南裕固族自治网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖肃南裕固族自治地区。费用合理售后完善，10余年实体公司更值得信赖。
这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表，当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式。本教程将涵盖创建这个滑动删除按钮所需要的一切。
删除例子
1.创建Ionic2应用
通过以下命令行语句创建新的Ionic2应用：
ionic start ionic2-delete blank --v2
这里我使用了–v2标志位，为了告诉Ionic命令行我们创建的是Ionic2项目。
2.准备列表数据
我们需要一些维护数据，因此要建立一些试验数据。创建我们项目的blank模版默认建立了一个Home组件，这个教程我们就在此基础上修改。
既然Ionic2还很新，我将这些步骤尽量阐述详细，下面我们看看app/home/home.js文件：
import {Page} from 'ionic/ionic'
伦理片
@Page({
templateUrl: 'app/home/home.html',
})
export class HomePage {
constructor() {}
}
constructor 方法在组件创建是执行，因此我们在这里准备试验数据。你可能已经注意到我们已经给这个组件定义了模版，随后将展示如何在模版中使用在这里添加的数据。
home.js 文件修改如下：
import {Page} from 'ionic/ionic'
@Page({
templateUrl: 'app/home/home.html',
})
export class HomePage {
constructor() {
this.items = [
{title: 'item1'},
{title: 'item2'},
{title: 'item3'},
{title: 'item4'},
{title: 'item5'},
{title: 'item6'}
];
}
}
现在我们有一些数据可以删除了。
3.修改主页（HOME）的模版
接下来我们编辑home.html来建立模版。现在的模版是包含一些创建ion-card的代码，而我们要用ion-list来代替：
修改 home.html如下：
ion-navbar *navbar
ion-title
Home
/ion-title
/ion-navbar
ion-content
ion-list
ion-item
I'm just a plain old item in a list...
/ion-item
/ion-list
/ion-content
这只是创建了只有一个单项的列表，接着我们将添加滑动元素。
继续修改home.html如下：
ion-navbar *navbar
ion-title
Home
/ion-title
/ion-navbar
ion-content
ion-list
ion-item-sliding
ion-item
Swipe me to the left
/ion-item
ion-item-options
button danger (click)="removeItem()"icon trash/icon Delete/button
/ion-item-options
/ion-item-sliding
/ion-list
/ion-content
通过上下对比，你应该看到：我们用ion-item-sliding替换了ion-item 。这允许我们创建一个ion-item-options 部件，当用户滑动列表元素时，它将显示出来。
这段代码还创建了一个删除按钮，当ion-item-options部件显示出来时，可以点击按钮，这时会触发类中定义的removeItem （暂无，接下来添加）。另外，我们不止是一个单项，我们要为我们创建的数组的每一个数据创建滑动项，这里我使用ng-for。
还是修改home.html如下：
ion-navbar *navbar
ion-title
Home
/ion-title
/ion-navbar
ion-content
ion-list
ion-item-sliding *ng-for="#item of items"
ion-item
{{item.title}}
/ion-item
ion-item-options
button danger (click)="removeItem(item)"icon trash/icon Delete/button
/ion-item-options
/ion-item-sliding
/ion-list
/ion-content
现在我们循环在类中定义的items数组的每个item项，然后为每个项创建一个 ion-item-sliding指令。注意我们使用的是#item而不是item。这将创建一个本地引用到迭代获得的item，这让我们可以使用 { {item.title} } 输出标题，它还允许我们传递item的引用到我们的 removeItem 函数。
我们现在有了一个列表包含所有数据，用户可以滑动并显示出一个delete按钮。现在剩下的是当用户点击时做点什么事。因此我们设置一个简单监听以便调用方法从我们先前创建的测试数据中删除一项。
4.创建方法删除数据
现在我们去到 home.js 文件编写方法处理数据删除。当前但删除按钮被点击时传送一个数据项给 removeItem。类似的，你可以非常容易的实现例如删除、编辑、分享、播放动画等你需要的东西，不仅是删除。
修改 home.js 如下：
import {Page} from 'ionic/ionic'
@Page({
templateUrl: 'app/home/home.html',
})
export class HomePage {
constructor() {
this.items = [
{title: 'item1'},
{title: 'item2'},
{title: 'item3'},
{title: 'item4'},
{title: 'item5'},
{title: 'item6'}
];
}
removeItem(item){
for(i = 0; i this.items.length; i++) {
if(this.items[i] == item){
this.items.splice(i, 1);
}
}
}
}
现在你向左侧滑动列表项，然后点击删除按钮，它就会从列表中删除。就像下面这样：
删除例子
5.添加一个编辑按钮
这里将不会将Edit按钮的全过程走一遍，但是你可以轻易扩展活动项并添加编辑按钮，如下所示：
ion-item-options
button primaryEdit/button
button danger (click)="removeItem(item)"icon trash/icon Delete/button
/ion-item-options
现在滑动时你有两个按钮了，看下面：
添加编辑按钮
然后你可以编写Edit按钮的点击事件了，具体取决于你的需求。
使用了h5的touchmove等事件，以及用js动态改变css3的translate属性来达到动画效果：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"
titlehtml5向左滑动删除特效/title
style
* {
padding: 0;
margin: 0;
list-style: none;
}
header {
background: #f7483b;
border-bottom: 1px solid #ccc
}
header h2 {
text-align: center;
line-height: 54px;
font-size: 16px;
color: #fff
}
.list-ul {
overflow: hidden
}
.list-li {
line-height: 60px;
border-bottom: 1px solid #fcfcfc;
position: relative;
padding: 0 12px;
color: #666;
background: #f2f2f2;
-webkit-transform: translateX(0px);
}
.btn {
position: absolute;
top: 0;
right: -80px;
text-align: center;
background: #ffcb20;
color: #fff;
width: 80px
}
/style
script
/*
* 描述：html5苹果手机向左滑动删除特效
*/
window.addEventListener('load', function() {
var initX; //触摸位置
var moveX; //滑动时的位置
var X = 0; //移动距离
var objX = 0; //目标对象位置
window.addEventListener('touchstart', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if (obj.className == "list-li") {
initX = event.targetTouches[0].pageX;
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
}
if (objX == 0) {
window.addEventListener('touchmove', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if (obj.className == "list-li") {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X = 0) {
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
} else if (X 0) {
var l = Math.abs(X);
obj.style.WebkitTransform = "translateX(" + -l + "px)";
if (l 80) {
l = 80;
obj.style.WebkitTransform = "translateX(" + -l + "px)";
}
}
}
});
} else if (objX 0) {
window.addEventListener('touchmove', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if (obj.className == "list-li") {
moveX = event.targetTouches[0].pageX;
X = moveX - initX;
if (X = 0) {
var r = -80 + Math.abs(X);
obj.style.WebkitTransform = "translateX(" + r + "px)";
if (r 0) {
r = 0;
obj.style.WebkitTransform = "translateX(" + r + "px)";
}
} else { //向左滑动
obj.style.WebkitTransform = "translateX(" + -80 + "px)";
}
}
});
}
})
window.addEventListener('touchend', function(event) {
event.preventDefault();
var obj = event.target.parentNode;
if (obj.className == "list-li") {
objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
if (objX -40) {
obj.style.WebkitTransform = "translateX(" + 0 + "px)";
objX = 0;
} else {
obj.style.WebkitTransform = "translateX(" + -80 + "px)";
objX = -80;
}
}
})
})
/script
/head
body
header
h2消息列表/h2
/header
section class="list"
ul class="list-ul"
li id="li" class="list-li"
div class="con"
你的快递到了，请到楼下签收
/div
div class="btn"删除/div
/li
li class="list-li"
div class="con"
哇，你在干嘛，快点来啊就等你了
/div
div class="btn"删除/div
/li
/ul
/section
/body
/html
一、 HTML5新增的标签
（1）header nav main footer section article hgroup figure figcaption aside
video audio canvas
（2）如何让新标签兼容低版本浏览器： html5shiv.js
二、 HTML5新增的表单控件
一、表单控件的新属性
input type="text" placeholder="" required autofocus pattern="abc"
二、新增的表单控件
（1）input type="email"
（2）input type="url"
（3）数字控件： type="number"
(4) 滑动组件： type="range"
(5) 拾色器： type="color"
(6) 日期控件： type="date"
三、本地存储
1、 三种本地存储 ： cookie webStorage(localStorage sessionStorage)
2、localStorage的API
(1)写入： localStorage.setItem(键，值); //值只能是字符串
localStorage.user = "123" localStorage["user"] = "123"
（2）读取 var user = localStorage.getItem("user")
var user = localStorage.user;
(3)删除： localStorage.removeItem("user") localStorage.clear()
（4）修改： localStorage.setItem("user","890")
3、sessionStorage的API
sessionStorage.setItem(键，值);
sessionStorage.getItem(键);
sessionStorage.removeItem(键);
sessionStorage.clear();
**********重点**********
4、cookie webStorage(localStorage sessionStorage)三者的区别
四、离线存储
（1） *.manifest (*.appcache)
index.html html manifest="*.manifest"
(2) 理解离线存储的更新方式
五、移动端的布局思路：
1、设备像素比（倍率） 逻辑像素尺寸 （360px 320px 375px 414px）
window.devicePixelRatio
2、 meta name="viewport" content="width=device-width,maximum-
scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""
3、使用rem单位
六、地理定位
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,{
timeout: 5000
});
function success(pos){
纬度: pos.coords.latitute
经度： pos.coords.longtitude
}
}
navigator.geolocation.watchPosition(success);
七、地理定位和百度地图API的结合
八、视频，音频 video autoplay="autoplay" controls="controls" loop="loop" poster=""
preload="preload" audio
九、移动端事件：
(1) ontouchstart ontouchmove ontouchend
(2) 如何判断是否为移动端： if ("ontouchstart" in document){}
(3) 移动端事件的事件对象及常用属性
e.touches[0].clientX e.touches[0].clientY e.touches[0].target
(4) 移动端常见问题及解决方案：
a、 click事件 300ms的延迟： 1zepto的tap事件 （2） fastclick.js
b、 zepto的tap事件有点透问题 ： （1） fastclick.js
(5) zepto的touch模块： tap singleTap doubleTap longTap
swipeLeft swipeRight swipeUp swipeDown
十、swiper.js的使用 （参考官网）
十一、 canvas
(1) canvas width="600" id="can"/canvas 300*150
(2) var can = document.getElementById("can");
var cxt = can.getContext("2d");
cxt.beginPath();
cxt.moveTo(100,200);
cxt.lineTo(200,400);
cxt.strokeStyle = '#f00';
cxt.stroke();
cxt.clearRect(0,0,200,300);
context.globalCompositeOperation="destination-out"; (了解)
1、创建两个html文件，一个test一个test2。
2、打开test页面，在里面创建一个div，并给其添加onmousedown与move方法。
3、打开后我们发现是一个棕绿的页面。
4、定义两个变量，startx为鼠标按下的坐标，endx为鼠标移动的坐标。
5、实现鼠标点击执行的down方法，在里面通过clientX获得鼠标按下坐标，并赋值给startx。
6、接着在实现鼠标移动的move方法，获得鼠标移动的坐标，并通过startx与endx相减判断是否向左边滑动大于30的距离，是的话就切换到test2页面。
7、现在我们打开test页面，向左滑动会提示切换页面（这个可以去除），确定后就切换到了test2页面，向右滑动切换的方法同理。
