vue+hammer.js完美实现长按、左滑，右滑等触控事件

最新推荐文章于 2024-05-26 09:46:22 发布
最新推荐文章于 2024-05-26 09:46:22 发布
阅读量907 收藏 3
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/yechangzhong-826217795/p/11497390.html
版权

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

 

转载于:https://www.cnblogs.com/yechangzhong-826217795/p/11497390.html

weixin_30633507
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
黄小鸭暴走记之  vue项目移动端图片放大功能  hammer包的引入和使用
sinat_14924563的博客
04-28 359
npm install hammerjs 在main.js文件中 import Hammer from 'hammerjs' 在页面中vue生命周期的 update钩子 let amplification = document.querySelector("#amplification"); console.log("amplification", amplification); let hammertime = new Hammer(amplification); .
vue hammer.js_Vue 2.x的Hammer.js包装器支持移动触摸
cuk5340的博客
07-24 950
vue hammer.js 威汉锤 (vue-hammer) Hammer.js wrapper for Vue to support some operation in the mobile. Vue的Hammer.js包装器支持移动设备中的某些操作。 This is a directive wrapper for Hammer.js 2.x. And this repo'inspirati...
vue2-hammer Vue 2.x的Hammer.js包装器，支持移动触摸。-Vue.js开发
05-27
vue-hammer Vue的Hammer.js包装器支持移动设备中的某些操作这是Hammer.js 2.x的指令包装器。 Vue-hammer的Hammer.js包装器为Vue提供了支持，以支持移动设备中的某些操作。这是Hammer.js 2.x的指令包装器。 而这种回购的灵感来自于v-touch。 如果要为Angular4 +查找相同的包装器，可以查看ngx-hammer安装。此插件支持Vue> = 2.0。 npm通过npm作为vue2-hammer可用。 npm从“ vue2-hammer”安装vue2-hammer import {VueHammer} Vue.use（VueHammer）用法使用v-hammer指令点击m
hammerJs 在vue里简单的使用
alize的博客
07-15 6689
参考链接：https://www.jianshu.com/p/0b0b9364f967 git链接：https://github.com/bsdfzzzy/vue2-hammer npm npm install vue2-hammer main.js import { VueHammer } from 'vue2-hammer' Vue.use(VueHammer) <a v-ham...
推荐开源项目：Vue-Hammer - 移动端手势操作的Vue封装库
最新发布
gitblog_00024的博客
05-26 275
推荐开源项目：Vue-Hammer - 移动端手势操作的Vue封装库 项目地址:https://gitcode.com/bsdfzzzy/vue2-hammer 在移动开发领域，为了提供丰富且直观的用户体验，手势操作变得越来越重要。今天我们要向您推荐一款强大的Vue插件——Vue-Hammer，它是一个基于Hammer.js的手势识别库的Vue指令包装器，能帮助您轻松地实现各种手势交互。 项目介绍...
hammer.js移动端图片手指缩放插件
01-09
实现移动端图片的查看后对图片的缩放移动操作 以及实现多图可切换实现相同功能。
基于vue+node.js+mysql的网站商城源码+数据库.zip
12-11
基于vue+node.js+mysql的网站商城源码+数据库.zip实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等 基于vue+node.js+mysql的网站商城源码+数据库.zip实现功能：首页轮播图...
基于vue+node.js+mysql的网站商城
06-01
所用技术：vue全家桶、vueRouter、Element UI、Axios、js、Node.js、Express、Mysql 实现功能：首页轮播图、商品展示、购物车、留言评论、收藏、新闻公告、注册登录、后台管理等
Vue+tracking.js 实现前端人脸检测功能
10-15
Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它提供了组件化、响应式的数据绑定和一套强大的指令系统，使得开发高效且易于维护。在本示例中，Vue.js 被用来创建一个面部登录界面。 tracking.js 是一...
基于vue+node.js+mysql的校园疫情管理系统.zip
12-11
基于vue+node.js+mysql的校园疫情管理系统.zip 前端基于vue.js+element-ui，后端基于node+express，数据库使用sql，网络请求使用axios的校园疫情管理系统 基于vue+node.js+mysql的校园疫情管理系统.zip 前端基于vue....
vue+Parallax.js | 视觉差特效
01-07
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面，尤其在单页应用程序（SPA）开发中广泛应用。它以其响应式数据绑定、组件化开发和轻量级特性著称。在本项目中，Vue.js 被用来创建一个结合了Parallax....
js长按点赞动画.zip
05-29
针对电脑浏览器及手机浏览器，利用canvas结合js实现点赞喷射表情动画效果
基于hammerjs封装旋转 拖拽 移动 缩放
01-13
使用方法方便简单，直接 调用drag('#test')就ok
H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件
m0_55074611的博客
08-04 3427
H5，Vue，实现图片预览功能，可双击放大，复位，重置，双指放大缩小图片，使用 hammerjs插件
vue3基于hammerjs实现移动端图片拖动缩放旋转功能案例
xiexikk的博客
05-27 3343
首先我们先有一个需求，就是在移动端h5实现图片的拖动，缩放，旋转等手势操作。 假如我们使用原生的touch实现起来是非常麻烦，推荐使用一下hammerjs这个包进行处理这些手势操作。 hammerjs是什么 　　hammerjs：hammerjs这个库可以让我们轻松的实现移动端上的手势操作， 也去除移动端上的点击事件的300ms延迟。 　　它封装了一下这些方法： pan 左右拖动 tap 点击 press 长时间按压 swipe 滑动 rotate 旋转效果 pinch 缩放 我写了个案例大概是这样子
hammer.js插件h5移动端手指拖拽缩放效果实践方法
weixin_30568591的博客
07-18 1172
由于要做一个在移动端触控元素的效果，需要去网上找一些插件，经过一番百度，涉及到touch的插件并不多，主要有hammer.js和panzoom.js两个插件。panzoom简单易用，直接绑定某个元素初始化就行了，但是后来发现，panzoom.js在安卓微信端上有兼容性问题，自己改插件的话很难，真是狗血了。 所以就换成了hammer.js，如果按照hammer官方api直接来写的话，会让...
Vue移动端H5手势缩放滚动拖拽插件Easyscroller
M_Jin的博客
09-02 4611
最近为了实现**移动端-手势放大缩小DOM元素又能滚动拖拽**的功能，找来找去，发现了一个非常好用的插件**Easyscroller**，总算是满足我的业务需求！！！发现用的人好像不是很多，所以发个博客向大家介绍介绍！！ Github地址↓↓↓ https://github.com/ulesta/easyscroller NPM地址↓↓↓ https://www.npmjs.com/package/easyscroller 先看一下官网的效果，看一下能不能满足大家的需求~ github上面有这...
H5移动端 实现图片缩放拖动（hammerjs)
weixin_43963309的博客
08-30 5223
在做Cordova+vue项目的时候，有需求是可以放多缩小以及拖动图片的功能，就类似于手机图库里面自带的缩放等功能。经查询可以使用hammerjs来做。
【南华大学毕业设计/毕业论文】基于Vue框架+Node.js的外卖系统（免费）
05-03
【南华大学毕业设计/毕业论文】基于Vue框架+Node.js的外卖系统，用来给大家参考格式

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值