【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>

\n

2016-02-22 00:18 添加评论 分享
已邀请:
0

老虎

赞同来自:

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

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

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


0

1025581299@qq.com

赞同来自:

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

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

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

使用楼主修改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
\n
0

林西

赞同来自:

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


要回复问题请先登录注册