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'.其实我们的本意是想得到整 ...
随机推荐
- MySQL基础之数据管理【5】
子查询的使用 select 字段名称 from tbl_name where col_name=(select col_name from tbl_name); --内层语句查询的结果可以作为外层语句 ...
- MySQL 优化 (二)
参数优化 Max_connections (1)简介 Mysql的最大连接数,如果服务器的并发请求量比较大,可以调高这个值,如果连接数越来越多,mysql会为每个连接提供单独的缓冲区,就会开销的越多的 ...
- xampp配置二级域名通过不同端口访问不同网站
首先需要在xampp\apache\conf\extra\httpd-vhost.conf中写入配置的二级域名 <VirtualHost *:8081> // 该网站通过监测8081端口 ...
- 201871010114-李岩松《面向对象程序设计（java）》第十六周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- Noip2015Day2T3 运输计划
题目链接 problem 一棵n个点带边权的树,有m个条路径.选择一条边,将其权值变为0,使得长度最长的路径长度最小.求该长度最小为多少. solution 其实仔细一想并不难. 删除一条边会导致所有 ...
- 基于UDP协议的socket套接字编程
目录 一.UDP套接字简单示例 1.1 服务端 二.客户端 三.UPD套接字无粘包问题 3.1 服务端 3.2 客户端 四.qq聊天 4.1 服务端 4.2 客户端1 4.3 客户端2 4.4 运行结 ...
- 再一次生产 CPU 高负载排查实践
前言 前几日早上打开邮箱收到一封监控报警邮件:某某 ip 服务器 CPU 负载较高,请研发尽快排查解决,发送时间正好是凌晨. 其实早在去年我也处理过类似的问题,并记录下来:<一次生产 CPU 1 ...
- ARM64的内核栈、用户栈、寄存器上下文
1. 内核栈的分配,即thread_info的分配,是在do_fork->dup_task_struct中分配(默认为2个pages),并赋值给task_struct->stack: 2. ...
- java高并发系列 - 第4天:JMM相关的一些概念
JMM(java内存模型),由于并发程序要比串行程序复杂很多,其中一个重要原因是并发程序中数据访问一致性和安全性将会受到严重挑战.如何保证一个线程可以看到正确的数据呢?这个问题看起来很白痴.对于串行程 ...
- VS中常用C#代码段快速输入总结
转自:https://blog.csdn.net/a980433875/article/details/12231673 Visual Studio 中有很多代码段都可以直接简写然后按TAB快速输入编 ...