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'.其实我们的本意是想得到整 ...
随机推荐
- 基于 Storyboard 多种方式的页面跳转、参数传递
原文 通过按钮关联跳转 选中 Button ,然后点击 action 右边拖拽到 第二个页面 选择 "Show"即可完成跳转关联. 定义页面间 segue Id,通过代码触发跳转 ...
- frp内网渗透实现ssh外网访问家里树莓派（树莓派raspbian系统+腾讯云contos7）
只有信用卡大小的它,同时也是一台功能完备的电脑(树莓派),把内网能玩的功能都玩了个遍,自然就有了外网访问这台树莓派的需求.一样也是查阅了无数文章,研究了无数个方案,最终试验成功用FRP实现了内网穿透, ...
- Python语法速查： 6. 循环与迭代
返回目录 (1)while循环与for循环 while仅能用于普通循环,而for除了可以做循环外,还可以遍历序列.集合.字典.迭代器等. 需要注意的是,在类似:for i in somelist: 的 ...
- s3c2440裸机-内存控制器(二、不同位宽外设与CPU地址总线的连接)
不同位宽设备的连接 black 我们先看一下2440芯片手册上外设rom是如何与CPU地址总线连接的. 8bit rom与CPU地址线的连接 8bit*2 rom与CPU地址线的连接 8bit*4 r ...
- 发送get请求接口
一.简介 python做接口测试,我们需要了解和学习第三方库requests.python内置的urllib模块,也用于访问网络资源,但是使用较麻烦,而且缺少很多实用的高级功能.这里推荐使用reque ...
- Least Common Multiple (HDU - 1019) 【简单数论】【LCM】【欧几里得辗转相除法】
Least Common Multiple (HDU - 1019) [简单数论][LCM][欧几里得辗转相除法] 标签: 入门讲座题解 数论 题目描述 The least common multip ...
- Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) B. Box 贪心
B. Box Permutation p is a sequence of integers p=[p1,p2,-,pn], consisting of n distinct (unique) pos ...
- vscode源码分析【二】程序的启动逻辑，第一个窗口是如何创建的
上一篇文章:https://www.cnblogs.com/liulun/ (小广告:我做的开源免费的,个人知识管理及自媒体营销工具“想学吗”:https://github.com/xland/xia ...
- PHP 的异步并行和协程 C 扩展 Swoole (附链接）
PHP的异步.并行.高性能网络通信引擎,使用纯C语言编写,提供了PHP语言的异步多线程服务器,异步TCP/UDP网络客户端,异步MySQL,异步Redis,数据库连接池,AsyncTask,消息队列, ...
- 使用Redis实现最近N条数据的决策
前言 很多时候,我们会根据用户最近一段时间的行为,做出一些相应的策略,从而改变系统的运动轨迹. 举个简单的例子来说明一下: 假设A公司现在有两个合作伙伴(B和C),B和C都是提供天气数据的,现在A公司 ...