vue+hammer.js完美实现长按、左滑，右滑等触控事件
移动端使用手指直接操作的方式大受用户欢迎，这其中就包括了单点、多点、长按、双击等方式。 这么多触控事件，如果开发者自己实现，会浪费大量的时间和精力，快来看看 hammer.js 让我们轻松了多少吧。
使用下面的方法vue+hammer.js完美的结合在了一起，对于体验很不错。长按删除后无需再次请求服务器，直接在vue中移除数组！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>反馈列表</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<style scoped>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<section class="aui-content" v-cloak>
<div class="aui-card-list" v-for="(item,index) in itemList" :id="item.FeedbackId" v-tap="tap" v-press="press" v-swipeleft='swipeleft' v-swiperight='swiperight'>
<div style="display: none">
{{index}}
</div>
<div class="aui-card-list-header">
反馈类型：{{item.TypeStr}}
</div>
<div class="aui-card-list-content-padded">
反馈内容：{{item.Content}}
</div>
<div class="aui-card-list-footer">
提交时间：{{item.AddTime}}
</div>
<div class="aui-card-list-content-padded">
回复内容：{{item.ReplyContent}}
</div>
<div class="aui-card-list-footer">
回复时间：{{item.ReplyTime}}
</div>
<div class="aui-hr"></div>
<hr>
</div>
</section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/hammer.min.js"></script>
<script type="text/javascript">
function vueTouch(el, type, binding) {
this.el = el;
this.type = type;
this.binding = binding;
var hammertime = new Hammer(this.el);
hammertime.on(this.type, this.binding.value);
};
Vue.directive("tap", {
bind : function(el, binding) {
new vueTouch(el, "tap", binding);
}
});
Vue.directive("swipeleft", {
bind : function(el, binding) {
new vueTouch(el, "swipeleft", binding);
}
});
Vue.directive("swiperight", {
bind : function(el, binding) {
new vueTouch(el, "swiperight", binding);
}
});
Vue.directive("press", {
bind : function(el, binding) {
new vueTouch(el, "press", binding);
}
});
</script>
<script type="text/javascript">
var pageNum = 1, pageSize = 10;
var i = 0;
var vm = new Vue({
el : ".aui-content",
data : {
itemList : [],
count : 0,
pageEnd : false
},
methods : {
tap : function(s, e) {
//console.log("点击");
},
swipeleft : function(s, e) {
//console.log("向左滑动:x偏移量[" + s.deltaX + "],y偏移量[" + s.deltaY + "]");
},
swiperight : function(s, e) {
//console.log("向右滑动:x偏移量[" + s.deltaX + "],y偏移量[" + s.deltaY + "]");
},
press : function(s, e) {
//console.log("长按")
//console.log(JSON.stringify(s))
var id = parseInt(s.target.parentNode.children[0].innerHTML);
delfeedback(s, id);
},
},
});
apiready = function() {
api.setRefreshHeaderInfo({
loadingImg : 'widget://image/refresh.png',
bgColor : '#ccc',
textColor : '#fff',
textDown : '下拉刷新...',
textUp : '松开刷新...'
}, function(ret, err) {
//在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
reloadList();
setTimeout('api.refreshHeaderLoadDone()', '500');
});
api.addEventListener({
name : 'feedback_frm'
}, function(ret, err) {
location.reload();
});
api.addEventListener({
name : 'scrolltobottom',
extra : {
threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
}
}, function(ret, err) {
if (vm.pageEnd) {
api.toast({
msg : '没有更多数据了'
})
} else {
getList();
}
});
reloadList();
};
//触底加载数据
function getList() {
api.showProgress({
title : '努力加载中...',
text : '请稍后...',
modal : false
});
api.ajax({
url : host + "/api/Feedback/MyFeedbackList?pageNum=" + pageNum + "&pageSize=" + pageSize,
method : "get",
headers : {
'Authorization' : 'Bearer ' + $api.getStorage("token")
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
if (ret.res.data.count == 0) {
api.toast({
msg : '没有更多数据了'
});
vm.pageEnd = true;
} else {
vm.itemList = vm.itemList.concat(ret.res.data.list);
vm.count = ret.res.data.count;
pageNum++;
}
}
} else {
api.alert({
msg : JSON.stringify("网络异常，请稍后再试吧")
})
}
setTimeout('api.hideProgress()', '500');
})
} //初次列表
function reloadList() {
pageNum = 1;
api.showProgress({
title : '努力加载中...',
text : '请稍后...',
modal : false
});
api.ajax({
url : host + "/api/Feedback/MyFeedbackList?pageNum=" + pageNum + "&pageSize=" + pageSize,
method : "get",
headers : {
'Authorization' : 'Bearer ' + $api.getStorage("token")
}
}, function(ret, err) {
if (ret) {
if (ret.code == 200) {
if (ret.res.data.count == 0) {
api.toast({
msg : '暂无数据，请先提交一个吧'
})
} else {
vm.itemList = ret.res.data.list;
vm.count = ret.res.data.count;
vm.pageEnd = false;
pageNum++;
}
}
} else {
if (err.body.code == "403") {
api.openWin({
url : "user_login_win.html",
name : "user_login_win",
})
} else {
api.alert({
//msg : JSON.stringify(err)
msg : JSON.stringify("网络异常，请稍后再试吧")
});
}
}
setTimeout('api.hideProgress()', '500');
});
} //删除我的反馈
function delfeedback(e, id) {
var obj = vm.itemList[id];
api.confirm({
title : '提示',
msg : '请选择你要删除吗？',
buttons : ['取消', '删除']
}, function(ret, err) {
var index = ret.buttonIndex;
if (index == 2) {
api.showProgress({
title : '正在处理中...',
text : '请稍后...',
modal : false
});
api.ajax({
url : host + "/api/Feedback/Del?FeedbackId=" + obj.FeedbackId,
method : 'post',
headers : {
'Content-Type' : 'application/json',
"Authorization" : "Bearer " + $api.getStorage("token")
}
}, function(ret, err) {
if (ret) {
if (ret.code == "200") {
vm.itemList.splice(id, 1);
// api.sendEvent({
// name : 'feedback_frm'
// });
api.toast({
msg : JSON.stringify(ret.res.msg),
duration : 2000,
location : 'middle'
});
} else {
api.alert({
msg : JSON.stringify(ret.res.msg)
})
}
setTimeout('api.hideProgress()', '500');
} else {
if (err.body.code == "403") {
api.openWin({
name : "user_login_win",
url : "user_login_win.html"
})
} else {
api.alert({
msg : JSON.stringify("网络异常，请稍后再试吧")
})
}
}
setTimeout('api.hideProgress()', '500');
});
}
});
}
</script>
</html>
vue+hammer.js完美实现长按、左滑，右滑等触控事件的更多相关文章
- Android SwipeToDismiss：左滑/右滑删除ListView条目Item
<Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(githu ...
- ViewPager 滑动一半的判断方法以及左滑右滑判断
做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewp ...
- 移动端h5禁用浏览器左滑右滑的前进后退功能
在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致canvas像是重置了一样内容消失,所以需要在代码中处理这种情况. 基本原理就是在touchmove事件中 ...
- Hammer.js
一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqer ...
- Hammer.js——给bootstrap添加触屏功能
Hammer.js qq群号(html5技术交流):158677025 手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言 移 ...
- H5案例分享：JS手势框架 —— Hammer.js
JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...
- hammer.js的六大事件
1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...
- Taro UI开发小程序实现左滑喜欢右滑不喜欢效果
前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...
- js 正则学习小记之左最长规则
原文:js 正则学习小记之左最长规则 昨天我在判断正则引擎用到的方法是用 /nfa|nfa not/ 去匹配 "nfa not",得到的结果是 'nfa'.其实我们的本意是想得到整 ...
随机推荐
- SAP记账期间变式
记帐期间变式能够控制每个公司代码中打开的记账期间,包括正常记账期间和特别记账期间.可以为企业组织架构中的每个公司代码定义一个归其单独使用的记账期间变式. 记账期间变式独立于会计年度变 ...
- 【入门级】Docker基础介绍(一)
Docker发展 Docker目前有两个版本: 1.Docker EE:企业版 2.Docker CE:社区版 Open Container Initiative倡议,包含两个规范, 1.运行时规范: ...
- 201871010101-陈来弟《面向对象程序设计（java）》第一周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- oracle中utl_raw
RAW,类似于CHAR,声明方式RAW(L),L为长度,以字节为单位,作为数据库列最大2000,作为变量最大32767字节.LONG RAW,类似于LONG,作为数据库列最大存储2G字节的数据,作为变 ...
- OpenvSwitch系列之五 网桥特性功能配置
Open vSwitch系列之一 Open vSwitch诞生 Open vSwitch系列之二 安装指定版本ovs Open vSwitch系列之三 ovs-vsctl命令使用 Open vSwit ...
- 《Spring Cloud微服务 入门 实战与进阶》
很少在周末发文,还是由于昨晚刚收到实体书,还是耐不住性子马上发文了. 一年前,耗时半年多的时间,写出了我的第一本书<Spring Cloud微服务-全栈技术与案例解析>. 时至今日,一年的 ...
- 手摸手教你bootstrap定制
老实说我一直不太喜欢使用bootstrap,bootstrap样式组件虽然丰富但实际开发使用到的不多:栅格系统虽然好用,满屏div也是看的头疼:所以当经理说要用bootstrap开发新项目的时候,我内 ...
- Ansible之roles角色
一.roles简介 ansible自1.2版本引入的新特性,用于层次性.结构化地组织playbook.roles能够根据层次型结构自动装载变量文件.tasks以及handlers等.要使用roles只 ...
- ubuntu通过代理设置update源
ubuntu更换国内源 备份/etc/apt/sources.list文件 cp /etc/apt/sources.list /etc/apt/sourses.list.backup #163源deb ...
- Ansible快速开始-指挥集群
Ansible可以集中地控制多个节点,批量地执行ssh命令.由于其使用ssh进行操作,因此远端服务器除了安装openssh-server(一般服务器已经内置)之外,不需要安装额外的软件,因此使用非常简 ...