某某不是一个函数Uncaught TypeError: swipe is not a function

在做移动端项目时，需要做一个滑动删除的功能，想到用jq的移动端插件 jquery.touchSwipe.min.js

自己做的demo完全没问题，可是放到项目中就报错

一开始以为是onload冲突，检查所有js后，并没有发现问题。

最后才发现是$冲突。

效果如下

具体demo代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
 6     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
 7     <script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script>
 8     <title>左滑动删除</title>
 9     <style>
10         ul,li{padding:0;margin:0;}
11         ul{
12             position: relative;
13 
14         }
15         li{
16             position: relative;
17             width: 100%;
18             text-align: left;
19             height:60px;
20             border-bottom: 1px solid #f00;
21         }
22         li>p{
23             width: 100%;
24             text-align: left;
25             background-color: #68ff31;
26             height:60px;
27             position: absolute;
28             z-index: 99;
29             margin:0;
30             top:0;
31             /*display: none;*/
32 
33         }
34         li>.button{
35             right:0;
36             width:100px;
37             height:60px;
38             background-color: #f00;
39             color:#fff;
40             text-align: center;
41             position: absolute;
42             z-index: 98;
43             margin:0;
44             border:none;
45             outline: none;
46         }
47     </style>
48 </head>
49 <body>
50 <ul class="list">
51     <li>
52         <p>首页</p>
53         <button type="button" class="button">删除</button>
54     </li>
55     <li>
56         <p>首页</p>
57         <button type="button" class="button">删除</button>
58     </li>
59     <li>
60         <p>首页</p>
61         <button type="button" class="button">删除</button>
62     </li>
63 </ul>
64 <!--滑动显示删除按钮-->
65 <script>
66     function toLeft(elem,is) {
67         if(is%2){
68             elem.animate({
69                 marginLeft: -100//left
70             }, "slow");
71         }else{
72             elem.animate({
73                 marginLeft: 0//right
74             }, "normal");
75         }
76     }
77     $(function(){
78         var p=$('.list>li>p');
79         p.swipe({
80             swipeStatus:function(event, phase, direction) {
81                 if(direction=="left"){
82                     toLeft($(this),1);
83                     return false;
84                 }
85                 else if(direction=="right"){
86                     toLeft($(this),0);
87                     return false;
88                 }
89             }
90         })
91     });
92 </script>
93 </body>
94 </html>

 

posted @ 2016-08-10 16:08  HALEY168  阅读(2392)  评论(0)  编辑  收藏  举报