移动端使用手指直接操作的方式大受用户欢迎，这其中就包括了单点、多点、长按、双击等方式。 这么多触控事件，如果开发者自己实现，会浪费大量的时间和精力，快来看看 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>