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'.其实我们的本意是想得到整 ...
随机推荐
- linux下Oracle与swap分区大小配置规划
Oracle于Linux系统---交换空间大小规划 分三种常用情况(1)实际内存为1GB~2GB建议交换空间为内存的1.5倍 (2)实际内存为2GB~8GB建议交换空间与内存相同 (3)实际内存超过8 ...
- flask框架--设置配置文件的几种方式 与Flask两种配置路由的方式
设置配置文件的几种方式 ==========方式一:============ app.config['SESSION_COOKIE_NAME'] = 'session_lvning' #这种方式要把所 ...
- linux shell攻略学习笔记二
1.Cat命令 这么多命令,常用的 Cat –n file 显示文件以及行数 Cat - echo 'Text through stdin' | cat - file.txt Text throug ...
- flag 履行我的flag
以后数组开小就不吃饭!!!!!! 上午考试不吃午饭 下午考试不吃晚饭 晚上考试不吃早饭 我以后还能吃饭吗 11.12距离csp-s还有2天,我的数组开小了,履行承诺,不吃饭了
- Java连载44-静态代码块、实例代码块、继承
一.可以使用static关键字来定义“静态代码块” 1.语法规则 static { java语句: } 2.静态代码块在类加载时执行,并且只执行一次 3.静态代码块在一个类中可以编写多个,并且遵循自上 ...
- ASP.NET 数据绑定
控件绑定数据源控件手动方式: DataSourceID = 数据源控件名称下拉框绑定 A.设置Datasource B.DataTextField="name"' //显示的值 C ...
- 关于 ASP.NET Core 中的 OData
1. BooksController using BooksODataService.Models; using Microsoft.AspNet.OData; using Microsoft.Asp ...
- 利用zabbix监控ogg进程(Windows平台下)
本文给大家介绍如何监控windows平台下的ogg程序.(注:所有操作都在administrator用户下面进行操作) 监控linux平台下的ogg程序请看:https://www.cnblogs.c ...
- 定位表和索引使用的Page
数据存储的基本单元是Page,每个Page是8KB,数据文件(mdf和ndf)占用的硬盘空间,逻辑上按照PageNumber进行划分,也就是说,可以把数据文件看作是PageNumber 从0到n的连续 ...
- wpf 单例模式和异常处理 （原发布 csdn 2017-04-12 20:34:12）
第一次写博客,如有错误,请大家及时告知,本人立即改之. 如果您有好的想法或者建议,我随时与我联系. 如果发现代码有误导时,请与我联系,我立即改之. 好了不多说,直接贴代码. 一般的错误,使用下面三个就 ...