【前端开发实例】移动端购物车左滑删除 -（七）

最新推荐文章于 2025-03-13 08:01:51 发布

原创

最新推荐文章于 2025-03-13 08:01:51 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端开发 #左滑删除

本文介绍如何在前端开发中实现移动端购物车的左滑删除功能。通过HTML、CSS和JavaScript，创建一个左滑显示删除按钮的效果。CSS中利用rem单位进行屏幕适配，JS部分包括屏幕适配和滑动事件监听。

Question. 问题

实现一个购物车中，左滑商品出现删除按钮的效果。

Solution. 解决

HTML文档部分：

<ul class="cart-buy list" id="list">
    <li class="cart-tr it-selected" id="150" data-spec="" style="border-bottom: none;">
        <div class="checkbox mui-checkbox">
            <input type="checkbox" name="checkbox1" id="listCheckBox" value="1" checked="checked">
        </div>
        <div class="nr">
            <a href="http://www.58dmnk.com/H4WXw-g.html" class="picbox"><img src="upload/img/goods/20171216/96880305e72bbd2bb3325a90a538b603_s.jpg" width="60" height="60" alt="商品图片未上传"></a>
            <div class="word">
                <a href="http://www.58dmnk.com/H4WXw-g.html" class="title">德玛乃康木兰醇四合一祛痘套装</a>
                <div class="price">
                    <p class="left red">￥<span class="g-price">199.00</span></p>
                    <p>x<span class="reconum">1</span></p>
                </div>
            </div>
            <input class="subtotal" type=

最低0.47元/天解锁文章