yangyang
yangyang
  • 发布:2015-05-15 18:24
  • 更新:2018-10-22 10:04
  • 阅读:4108

动态加载的switch开关,为什么无效,没法滑动?

分类:MUI
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>在首页显示</title>  
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link rel="stylesheet" href="../../css/mui.min.css">  
    <link rel="stylesheet" href="../../css/iconfont.css">  
    <link rel="stylesheet" href="../../css/style.css">  
    <style>  
        .iconfont {  
            color: #47A400;  
            font-size: 20px;  
        }  

        .mui-table-view {  
            margin-top: 15px;  
            margin-bottom: 15px;  
            display: none;  
        }  
    </style>  
</head>  
<body>  
<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
    <button id="save" class="mui-btn mui-btn-link mui-btn-nav mui-pull-right">  
        保存  
        <span class="mui-icon mui-icon-right-nav"></span>  
    </button>  
    <h1 class="mui-title">在首页显示</h1>  
</header>  
<div class="mui-content">  
    <ul class="mui-table-view" id="data-list">  

    </ul>  
</div>  
</body>  
<script src="../../js/mui.min.js"></script>  
<script src="../../js/jquery-1.10.2.min.js"></script>  
<script src="../../js/jquery.lazyload.min.js"></script>  
<script src="../../js/data.js"></script>  
<script src="../../js/signin.js"></script>  
<script src="../../js/app.js"></script>  
<script>  
    mui.init({});  

    function loadService() {  
        mui.getJSON(server + '/m/wuye/service/load', {'uid': UserInfo.uid()}, function (data) {  
            if (data.success) {  
                plus.nativeUI.closeWaiting();  
                var obj = data.serviceList;  
                var html = '';  
                var ele = $("#data-list");  
                ele.css('display', 'block');  
                for (var i = 0; i < data.serviceList.length; i++) {  
                    html += '<li class="mui-table-view-cell">' +  
                            '<span class="mui-icon iconfont ' + obj[i].icon + '"></span>' + obj[i].name +  
                            '<div class="mui-switch mui-active">' +  
                            '<div class="mui-switch-handle"></div>' +  
                            '</div>' +  
                            '</li>';  
                }  
                console.log(html);  
                ele.html(html);  
            }  
        });  
    }  

    //  mui('.mui-content .mui-switch').each(function () { //循环所有toggle  
    //      //toggle.classList.contains('mui-active') 可识别该toggle的开关状态  
    //      this.parentNode.querySelector('span').innerText = '状态:' + (this.classList.contains('mui-active') ? 'true' : 'false');  
    //      /**  
    //       * toggle 事件监听  
    //       */  
    //      this.addEventListener('toggle', function (event) {  
    //          //event.detail.isActive 可直接获取当前状态  
    //          this.parentNode.querySelector('span').innerText = '状态:' + (event.detail.isActive ? 'true' : 'false');  
    //      });  
    //  });  
    function plusReady() {  
        plus.nativeUI.showWaiting("等待中...");  
        loadService();  
    }  

    if (window.plus) {  
        plusReady()  
    } else {  
        document.addEventListener('plusready', plusReady, false)  
    }  
</script>  
</html>
2015-05-15 18:24 分享
已邀请:

最佳回复

DCloud_UNI_FXY

DCloud_UNI_FXY

动态生成后,需要手动调用初始化

mui('.mui-content .mui-switch')['switch']();
  • 盘龍

    有个疑问,希望得到解惑,谢谢!

    mui('.mui-content .mui-switch')['switch']的这里['switch']可以解析一下吗?

    mui('.mui-content .mui-switch')的数据类型应该是数组,那为什么里面会有switch呢?

    是mui()这个方法中附带的吗?

    2015-07-21 14:08

  • 盘龍

    回复 盘龍:嗯,明白了。类似于JQUERY($),这个里面也是带有JQUERY的上下文的!如果我理解错误,请指出,谢谢!

    2015-07-21 14:09

  • binbin

    请问 mui('.mui-content .mui-switch')['switch'](); 加在哪里

    2016-08-28 10:43

鸡肉味道美

鸡肉味道美

遇到了同样的问题,动态添加的swich无法滑动,请问解决了吗?

辉

老师您好,这是我在js里面写的代码: var li='<span >系统消息</span>'
+'<div class="mui-switch" id="s">'
+'<div class="mui-switch-handle"></div>'
+'</div>';
$("#xt").append(li);>
在页面上显示的按钮,点击没反应,不知是什么原因?
html里面的代码是: <div class="mui-content">
<ul class="mui-table-view" >
<li class="mui-table-view-cell" id="xt">
<span >系统消息</span>
<div class="mui-switch " >
<div class="mui-switch-handle"></div>
</div>
</li>
<li class="mui-table-view-cell" id="gr">
<!--<span>个人消息</span>
<div class="mui-switch mui-active" >
<div class="mui-switch-handle"></div>
</div>
-->
</li>
</ul>
</div>
能不能帮我看一下是什么问题?谢谢!

1622370476@qq.com

1622370476@qq.com

已经遇到了,感谢感谢上面的楼主。

1113240207@qq.com

1113240207@qq.com

感谢DCloud_MUI_FXY 回复 遇到同样的问题,已解决

  • binbin

    请问 mui('.mui-content .mui-switch')['switch'](); 加在哪里

    2016-08-28 10:43

  • 1142340492@qq.com

    同问,请您帮忙解答下,谢谢~

    2016-10-18 09:58

要回复问题请先登录注册