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欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    leetcode701. Insert into a Binary Search Tree
    leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes
    leetcode 110. Balanced Binary Tree
    leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
    二叉树
    leetcode 124. Binary Tree Maximum Path Sum 、543. Diameter of Binary Tree(直径)
    5. Longest Palindromic Substring
    128. Longest Consecutive Sequence
    Mac OS下Android Studio的Java not found问题,androidfound
    安卓 AsyncHttpClient
  • 原文地址:https://www.cnblogs.com/haley168/p/dragOfDel.html
Copyright © 2011-2022 走看看