SFSM
SFSM
  • 发布:2016-02-22 00:18
  • 更新:2018-12-06 16:19
  • 阅读:1602

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

分类:MUI

简单回现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 分享
已邀请:
老虎

老虎

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

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

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

  • 1010724827@qq.com

    一年多了,还是这样。。。你的方法可用

    2017-08-16 15:26

  • 1010724827@qq.com

    不过官方给了只能使用id的新方法,只是适用范围不广:mui("#mySwitch").switch().toggle();

    2017-10-09 19:33

1025581299@qq.com

1025581299@qq.com

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

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

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

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

767700237@qq.com

767700237@qq.com

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

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

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

767700237@qq.com

767700237@qq.com

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

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

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

林西

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

要回复问题请先登录注册