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'.其实我们的本意是想得到整 ...
随机推荐
- ArcGIS api for JavaScript 3.27 FindTask查询功能
在ArcGIS API中查询功能是经常使用的,常用的三个查询分别是FindTask,QueryTask,IdentifyTask.它们各自都有自己的特点. 查询功能分为属性查询和空间查询 FindTa ...
- 更改组织属性-以更改maxrecordsforexporttoexcel为例
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复232或者20161101可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- Linux下使用 github+hexo 搭建个人博客03-hexo配置优化
上两张文章,我们说了 hexo 部署.主题的切换.博文的创建.MarkDown 简单使用和 hexo 部署到 GitHub Pages. 也说了我们会使用 next 主题做为我们后期博客的使用和维护. ...
- Linux—文件管理
文件操作 创建文件 [root@localhost ~]# touch a.txt # 创建单个文件 [root@localhost ~]# touch b.txt c.txt # 创建多个文件 删除 ...
- Centos7配置桥接网络
- Tcp连接和断开
三次握手:客户端为a,服务端为b:开始都是closed状态:a主动打开进入到syn_sent状态,b被动打开进入listen状态:第一次握手,a向b发送SYN=1,seq为x的包,b收到以后进入syn ...
- eNSP仿真模拟软件之理解Hybrid接口的应用
1. 实验原理 Hybrid接口既可以连接普通终端的接入链路又可以连接交换机间的干道链路,它允许多个VLAN的帧通过,并可以在出接口方向将某些VLAN帧的标签剥掉. Hybrid接口处理VLAN帧的过 ...
- cartographer 3D scan matching 理解
cartographer 3D scan matching没有论文和其它资料,因此尝试通过源码理解其处理方法,理解不当之处还请指正. 目录: 0.2D 匹配方法简介 1.real time corre ...
- DevExpress启动时的全屏SplashScreen
使用DevExpress启动时弹出"正在加载"的Logo,而且是全屏,这种感觉不太好. 原因是使用了DocmentManager控件,当DocmentManager初始化如果耗时较 ...
- CF750G New Year and Binary Tree Paths（DP）
神仙题.为啥我第一眼看上去以为是个普及题 路径有两种,第一种是从 LCA 一边下去的,第二种是从 LCA 两边都下去了的. 先考虑第一种. 先枚举路径长度 \(h\). 当 LCA 编号是 \(x\) ...