美文网首页
mui使用总结

mui使用总结

作者: 热心程序猿黄帅哥 | 来源:发表于2019-01-31 11:48 被阅读0次

    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

    未完待续。。。。

    相关文章

      网友评论

          本文标题:mui使用总结

          本文链接:https://www.haomeiwen.com/subject/gbeksqtx.html