MUI——MUI左滑删除、MUI右滑删除、MUI左\右滑删除

功能需求：在移动端页面开发，当列表的一个条目发生左滑、右滑时唤出备选菜单以供操作

功能实现：

第一步：引入MUI的CSS和JS文件

<link href="https://www.dcloud.net.cn/hellomui/css/mui.min.css" rel="stylesheet">
<script src="https://www.dcloud.net.cn/hellomui/js/mui.min.js"></script>

第二步：编写所需DOM结构

<body class="mui-ios mui-ios-13 mui-ios-13-2 mui-ios-13-2-3" style="zoom: 1;">
<div>
    拖拽后显示操作图标，点击操作图标删除元素↓
    <ul id="itemList1" class="mui-table-view">
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-blue">编辑</a>
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                左滑显示删除按钮
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-left mui-disabled">
                <a class="mui-btn mui-btn-blue">编辑</a>
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                右滑显示删除按钮
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-left mui-disabled">
                <a class="mui-btn mui-btn-blue">编辑</a>
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-blue">编辑</a>
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                左右滑动均可显示删除按钮
            </div>
        </li>
    </ul>
    向左拖拽后显示操作图标，释放后自动触发的业务逻辑
    <ul id="itemList2" class="mui-table-view">
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                左滑显示删除按钮
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-left mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                右滑显示删除按钮
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-left mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-red">删除</a>
            </div>
            <div class="mui-slider-handle">
                左右滑动均可显示删除按钮
            </div>
        </li>
    </ul>
</div>
</body>

编写所需JS：

<script>
    mui.init();
    (function ($) {

        var btnArray = ['确认', '取消'];

        //拖拽后显示操作图标，点击操作图标删除元素
        $('#itemList1').on('tap', '.mui-btn', function (event) {
            var elem = this;
            var li = elem.parentNode.parentNode;
            mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定' + this.innerText + '此条信息？</h3></div>', '温馨提醒', btnArray, function (e) {
                // if (e.index == 0) {
                //     li.parentNode.removeChild(li);
                // } else {
                //     setTimeout(function () {
                //         $.swipeoutClose(li);
                //     }, 0);
                // }
            });
        });

        //向左拖拽后显示操作图标，释放后自动触发的业务逻辑
        $('#itemList2').on('slideleft', '.mui-table-view-cell', function (event) {
            var elem = this;

            mui.confirm('<div class="text"><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function (e) {
                if (e.index == 0) {
                    elem.parentNode.removeChild(elem);
                } else {
                    setTimeout(function () {
                        $.swipeoutClose(elem);
                    }, 0);
                }
            });
        });

        // //第二个demo，向右拖拽后显示操作图标，释放后自动触发的业务逻辑
        $('#itemList2').on('slideright', '.mui-table-view-cell', function (event) {
            var elem = this;
            mui.confirm('<div class="text"><p class="icon-information"></p><h3>确定删除此条消息？</h3><span>REMIND</span></div>', 'Hello MUI', btnArray, function (e) {
                if (e.index == 0) {
                    elem.parentNode.removeChild(elem);
                } else {
                    setTimeout(function () {
                        $.swipeoutClose(elem);
                    }, 0);
                }
            });
        });
    })(mui);
</script>

运行结果:

posted @ 2020-08-20 23:07  手握钢叉的猹  阅读(2106)  评论(0)  编辑  收藏  举报