Zepto实现滑动删除效果

最新推荐文章于 2021-06-16 03:11:53 发布

六月星海

最新推荐文章于 2021-06-16 03:11:53 发布

阅读量897

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_38039015/article/details/79911687

版权

Web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1.参考代码

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <title></title>
        <style>
            .delete {
                display: none;
                border: 1px solid #a1a5a6;
                padding: 4px 8px;
                background: #d5dbd6;
                font-size: 14px;
                border-radius: 4px;
            }

            #items li {
                list-style: none;
                padding-top: 10px;
            }
        </style>
    </head>

    <body>
        <ul id="items">
            <li>我是要删除的内容1
                <span class="delete">DELETE</span>
            </li>
            <li>我是要删除的内容2
                <span class="delete">DELETE</span>
            </li>
        </ul>

        <script src="js/zepto.js"></script>
        <script>
            //在对应的内容上滑动，显示对应的删除标签
            $('#items li').swipe(function() {
                $('.delete').hide();
                $('.delete', this).show();
            });

            //点击删除标签时，实现删除该行的内容
            $('.delete').tap(function() {
                $(this).parent('li').remove();
            })
        </script>
    </body>

</html>

2.效果图：

这里写图片描述

点击删除标签后删除对应的文本内容实现以下效果：

这里写图片描述

六月星海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zepto实现滑动删除效果

1.参考代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no
复制链接

扫一扫