微信小程式 switch元件實現

2021-08-14 22:19:14 字數 960 閱讀 6962

紅色switch元件

綠色switch元件

綠色禁用switch元件

藍色switch元件---開

藍色switch元件---關

.switch-list

.fui-switch

.fui-switch:checked

.fui-switch::after,.fui-switch::before

.fui-switch:before

.fui-switch:checked:before

.fui-switch:after

.fui-switch:checked:after

.fui-switch[disabled]

.fui-fr

(function(win,factory),false);

}(window,function(win)));

此處 1rem 在 750 的 psd 設計圖代表 100px ;

switch 的切換動畫是通過 css3 的 transition 屬性實現;

主要是控制 switch 的 after 的移動,以及 before 的放大縮小動畫。

我的部落格,歡迎交流!

我的csdn部落格,歡迎交流!

前端筆記專欄

前端筆記列表

遊戲列表

微信小程式 switch元件(開關選擇器)

狀態 狀態 狀態 狀態 狀態 狀態 var pageobj for var i 0 i 7 i changeddata ischecked i this.data ischecked i this.setdata changeddata i page pageobj switch元件的屬性 chec...

微信小程式 switch元件(開關選擇器)

狀態 text class tui fr checked bindchange changeswitch1 view class tui menu list 狀態 text class tui fr checked bindchange changeswitch2 view class tui me...

微信小程式 switch元件(開關選擇器)

狀態 text class tui fr checked bindchange changeswitch1 view class tui menu list 狀態 text class tui fr checked bindchange changeswitch2 view class tui me...