【BUG】switch开关圆点不移动问题

简单回现BUG

新建一个带有switch的控件,代码稍后见底部
然后chrome模拟手机访问该网页
第一次用鼠标拖动switch打开,
第二次用代码:document.getElementById("sBtn").classList.remove('mui-active');
BUG出现,原点不移动

原因:mui.js里面在toggle事件中修改了元素.style.webkitTransform,导致css被覆盖,简单通过增加删除mui-active已经无效

应急方法:在mui.js搜索handle.style.webkitTransform,然后所有(4个)包含该句的代码注释掉

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <script src="js/mui.min.js"></script>  
    <link href="css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="UTF-8">  
        mui.init();  
    </script>  
</head>  
<body>  
    <div class="mui-content">  
        <ul lass="mui-table-view mui-table-view-chevron">  
            <li class="mui-table-view-cell">  
                BUG回现  
                <div id="sBtn" class="mui-switch">  
                    <div class="mui-switch-handle"></div>  
                </div>  
            </li>  
        </ul>  
    </div>  
</body>  
</html>  
2016-02-22 00:18 添加评论 分享
已邀请:
0

老虎

赞同来自:

经本人详细测试,的确为bug,但没有必要修改mui.js
只需加入如下代码即可:

///[BUG]消除switch按钮显示错乱的问题!  
document.querySelector('.mui-switch-handle').setAttribute('style', '');  
///http://www.meiweipub.com  

官方给的login示例中,setting页面中的锁屏部分代码也有这个bug,可加入上面代码解决。
还希望官方早日解决此bug。

0

1025581299@qq.com

赞同来自:

我的应用场景是是一个switch控制其他switch的开关,出现的问题是圆点不跟随开关移动,BUG效果是如下这样的

使用如下的解决方式,问题还是存在

document.querySelector('.mui-switch-handle').setAttribute('style', '');  

使用楼主修改mui.js的源码的方式可以完成我的效果,特此在这提醒下踩坑的朋友

0

767700237@qq.com

赞同来自:

在mui("#开关Id").switch().toggle();后面加

document.getElementById('小圆点Id').style.transform = "translate(43px, 0px)";

在那个小圆点<div class="mui-switch-handle"></div>这个元素上加个Id

0

767700237@qq.com

赞同来自:

//在mui("#开关Id").switch().toggle();后面加  

document.getElementById('小圆点Id').style.transform = "translate(43px, 0px)";  

//在那个小圆点<div class="mui-switch-handle"></div>这个元素上加个Id  
0

林西

赞同来自:

3.7版本上面一样没改bug,昂 就用楼主的了

要回复问题请先登录注册