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

時間 2020-08-21

標籤 mui 刪除简体版

原文原文鏈接

功能需求：在移動端頁面開發，當列表的一個條目發生左滑、右滑時喚出備選菜單以供操做css

功能實現：ios

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

<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結構ui

<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：this

<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>