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

分类：MUI

switch mui bug反馈

简单回现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 负责人:无分享

5 个回复

老虎

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

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

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

1***@qq.com

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

2017-08-16 15:26
1***@qq.com

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

2017-10-09 19:33

1***@qq.com

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

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

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

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

7***@qq.com

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

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

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

7***@qq.com

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

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

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

b***@163.com

正解

2019-01-09 15:57

林西

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

该问题目前已经被锁定, 无法添加新回复

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

5 个回复

公告

相关问题

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

与内容相关的链接

5 个回复

公告

相关问题