微信小程序switch樣式調整


修改方案一:

參考:https://blog.csdn.net/littlebeargreat/article/details/79130305

/*swtich整體大小*/
.wx-switch-input{
width:82rpx !important;
height:40rpx !important;
}
/*白色樣式(false的樣式)*/
.wx-switch-input::before{
width:80rpx !important;
height: 36rpx !important;
}
/*綠色樣式(true的樣式)*/
.wx-switch-input::after{
width: 40rpx !important;
height: 36rpx !important;
}

 

修改成功,如果要完全調整和Ui圖一樣比較難控制,類似這樣:開關打開,白色部分超出顯示,各種問題

 

 

修改方案二:

用zoom屬性修改 ,zoom的值越大,switch越大   1是原大小,1-0.1成倍縮小    1-...   成倍放大    可以自己試試,找個適合的尺寸

switch_default_address {

zoom: .4;

}

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM