最近開發一個基于mui框架的一個微信小程序,發現在使用mui框架中的switch開關的時候,想要達到聯動的功能,讓一個主開關控制幾個子開關,發現雖然開關的顏色變了,但是開關上的小圓點不動,對于剛入mui框架的新手,覺得一臉的懵逼,經過多方查找,然后自己動手,解決了這個問題,就想在此分享一下。
頁面上
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div></div>
mui-active表示開關為打開狀態,移除屬性mui-active開關就是關閉狀態,很顯然大家都會想到利用js控制給相應的switch添加或者移除屬性mui-active就可以達到動態控制開關狀態,理論上是可以的,但會經常出現如下圖的情況

這種情況出現的解決方法就是將 class屬性為mui-switch-handle 的div的style進行清空就可以了
代碼為:
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div></div>
jQuery代碼:
$(".mui-switch-handle").attr("style","");$(".mui-switch").removeClass("mui-active");產生這個問題的原因我沒有具體研究,大概是mui框架在switch進行toggle的時候在 class=mui-switch-handle的div中加入的了圓點移動的樣式,所以下次要更改開關的樣式的時候需要把先前的樣式清空掉。
好了,忘采納!
以上這篇解決mui框架中switch開關通過js控制開或者關狀態時小圓點不動的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答