mui使用总结

1.事件监听：

事件.png

2、调用时间选择弹窗：

chooseTime(num) {
     // 时间选择 num 传0是开始时间，1是结束时间
     var _this = this;
     var dtPicker = new mui.DtPicker({ type: "date" });
     dtPicker.show(function(rs) {
       /*
        * rs.value 拼合后的 value
        * rs.text 拼合后的 text
        * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
        * rs.m 月，用法同年
        * rs.d 日，用法同年
        * rs.h 时，用法同年
        * rs.i 分（minutes 的第二个字母），用法同年
        */
       if (num == 0) {
         _this.$refs.startTime.innerText =
           rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
         _this.searchCondition.start =
           rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
       } else if (num == 1) {
         _this.$refs.endTime.innerText =
           rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
         _this.searchCondition.end =
           rs.y.value + "-" + rs.m.value + "-" + rs.d.value;
       }

       /*
        * 返回 false 可以阻止选择框的关闭
        * return false;
        */
       /*
        * 释放组件资源，释放后将将不能再操作组件
        * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
        * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
        * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
        */
       dtPicker.dispose();
     });
   },

3、手机端列表向左滑出现删除：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mui</title>
    <link rel="stylesheet" href="./js/mui/mui.min.css">
    <link rel="stylesheet" href="./js/mui/mui.picker.css">
    <link rel="stylesheet" href="./js/mui/mui.picker.min.css">
    <link rel="stylesheet" href="./js/mui/mui.poppicker.css">
    <style>
        * {
            touch-action: none;
        }

        #hyx {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="mui-content">
        <ul id="OA_task_1" class="mui-table-view">
            <li class="mui-table-view-cell">
                <div class="mui-slider-right mui-disabled">
                    <div class="mui-btn mui-btn-red">删除</div>
                </div>
                <div class="mui-slider-handle">
                    <div>黄xxx</div>
                    <div>hyx</div>
                </div>
            </li>
        </ul>
    </div>


    </div>

    <script src="./js/mui/mui.min.js"></script>
    <script src="./js/mui/mui.picker.js"></script>
    <script src="./js/mui/mui.picker.min.js"></script>
    <script src="./js/mui/mui.poppicker.js"></script>
    <script>
        mui.init();
        var btn = document.querySelector(".mui-btn-red");
        var oLi = document.querySelector(".mui-table-view-cell");
        var handle = document.querySelector(".mui-slider-handle");
        btn.onclick = function () {
            if (btn.innerText === "删除") {
                btn.innerText = "确认删除";
                btn.style = "transform: translate(-116px, 0px);";
                handle.style = "transform: translate(-116px, 0px);"

            } else {
                alert("删除成功");
                btn.style = "transform: translate(0);";
                handle.style = "transform: translate(0);"
                btn.innerText = "删除";
            }
        }
        监听向左滑动
        oLi.addEventListener("swipeleft", function () {
            alert('像左滑动')
        });

        //监听向右滑动
        oLi.addEventListener("swiperight", function () {
            btn.innerText = "删除";
            console.log("像右滑动")
        });
    </script>
</body>

</html>

列表.png

左滑点击.png

点击后确定.png

未完待续。。。。

最后编辑于：2019.03.08 15:16:31