用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

【微信小程序】寫一個能自定義尺寸、樣式的switch

Rolan 2019-12-24 00:51

小程序原生的switch不能靈活的修改寬高、樣式,很不方便,我這邊參考WeUI的開關,寫了一個可以自定義尺寸樣式的switch組件。直接上代碼:https://gitee.com/piscdong/we...效果如下圖,可以自定義寬高,可以做成方角 ...

小程序原生的switch不能靈活的修改寬高、樣式,很不方便,我這邊參考 WeUI 的開關,寫了一個可以自定義尺寸樣式的switch組件。

直接上代碼: https://gitee.com/piscdong/we...

效果如下圖,可以自定義寬高,可以做成方角的

代碼分析

這個switch主要的難點就是點擊后背景顏色變換的動畫,這里用到了css的transition、transform兩個屬性來實現動畫,以及::before和::after兩個偽元素。

wxml基本結構為:

<view class="switch">
    <view></view>
</view>

父級view是整個switch容器,會用到::before做背景色切換動畫,::after做禁用時的灰色遮罩。內部的一個view是來回切換的白點。未選中時默認class是switch,選中時增加一個class:switch_checked。

選中狀態到未選中狀態背景有一個從中間變大到全部的白色動畫,所以需要給父級view設置一個顏色作為背景色。

.switch {
    ...
    background: #00c000;
    position: relative;
}

未選中時::before覆蓋整個容器,選中時::before設置 transform: scale(0); ,這樣選中時白色區域就會縮放到最小,再加上transition的實現動畫效果。

.switch::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 9999rpx;
    background: #fff;
    transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch_checked::before {
    transform: scale(0);
}

來回移動的白點,未選中時通過 left: 0; 定位到左側,選中時將left設置為100%定位到右側,但是這樣白點會完全移出容器范圍,所以還需要加上 transform: translateX(-100%); 將白點向左再一定自身寬度的100%,同樣加上transition的實現動畫效果。

.switch view {
    position: absolute;
    top: 0;
    left: 0;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
    transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}

.switch_checked view {
    left: 100%;
    transform: translateX(-100%);
}

關于“::”

最后搭車說一下“:”和“::”,“:”是偽類,“::”是偽元素。按照我的理解:偽類不會在dom中增加節點,只不過是css選擇器的一種特殊效果;偽元素會增加節點,flex布局中會影響到其他元素。

為了保證兼容性,css3是允許偽元素使用單個冒號。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 祺爸 來自: segmentfault
东方红彩票 - 购彩大厅 为什么银行股票今天 想开通香港股票开户 炒股下载什么app 第五家私募资产配置类管理人 炒股行情 中国神华股票行情 今日美国股市行情 股票开户营业部 炒股票入门app 上证a股指数