zoukankan      html  css  js  c++  java
  • 某某不是一个函数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>
    haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    POJ 2794 Exploring Pyramids
    POJ 2282 The Counting Problem
    eclipse中设置java注释模板
    eclipse复制工程需要注意的地方
    extjs的强大利器GUI设计工具(extjs designer)
    eclipse项目名前出现红色感叹号,小红叉解决(转)
    上传一份个人学习struts2的历程笔记
    struts2中的action与actioncontext的理解
    J2EE后台UI系统框架搭建EXTJs使用(4.1 GPL版本)
    java.lang.OutOfMemoryError: Java heap space 解决方法转测试可用
  • 原文地址:https://www.cnblogs.com/haley168/p/dragOfDel.html
Copyright © 2011-2022 走看看