vue+hammer.js完美實現長按、左滑，右滑等觸控事件

時間 2019-11-06
標籤 vue+hammer.js vue hammer 完美實現事件欄目 JavaScript 简体版
原文原文鏈接
移動端使用手指直接操做的方式大受用戶歡迎，這其中就包括了單點、多點、長按、雙擊等方式。這麼多觸控事件，若是開發者本身實現，會浪費大量的時間和精力，快來看看 hammer.js 讓咱們輕鬆了多少吧。javascript
使用下面的方法vue+hammer.js完美的結合在了一塊兒，對於體驗很不錯。長按刪除後無需再次請求服務器，直接在vue中移除數組！css
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。