微信小程序–电池容量、电池剩余电量样式

大家好，又见面了，我是你们的朋友全栈君。

效果如图所示：竖列的我用的旋转横列90度实现的

wxml:

<view class=”complex”>

<view data-charge=’0′ class=”battery”></view>

<view data-charge=’1′ class=”battery”></view>

<view data-charge=’2′ class=”battery”></view>

<view data-charge=’3′ class=”battery”></view>

<view data-charge=’4′ class=”battery”></view>

<view data-charge=’5′ class=”battery”></view>

<view data-charge=’6′ class=”battery”></view>

<view data-charge=’7′ class=”battery”></view>

<view data-charge=’8′ class=”battery”></view>

<view data-charge=’9′ class=”battery”></view>

<view data-charge=’10’ class=”battery”></view>

</view>

<view class=”complex”>

<view data-charge=’0′ class=”battery1″></view>

<view data-charge=’1′ class=”battery1″></view>

<view data-charge=’2′ class=”battery1″></view>

<view data-charge=’3′ class=”battery1″></view>

<view data-charge=’4′ class=”battery1″></view>

<view data-charge=’5′ class=”battery1″></view>

<view data-charge=’6′ class=”battery1″></view>

<view data-charge=’7′ class=”battery1″></view>

<view data-charge=’8′ class=”battery1″></view>

<view data-charge=’9′ class=”battery1″></view>

<view data-charge=’10’ class=”battery1″></view>

</view>

wxss:

.battery {

color: #34495e;

border: 1px solid currentColor;

display: inline-block;

width: 50px;

height: 20px;

position: relative;

border-radius: 2px;

display: border-box;

margin: 5px;

}

.battery::before,

.battery::after {

content: “”;

position: absolute;

}

.battery::before {

top: 2px;

bottom: 2px;

right: -3px;

width: 1px;

display: border-box;

border: 1px solid currentColor;

border-left: 0;

}

.battery::after {

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: 1px;

border-radius: 1px;

background-color: currentColor;

transition: right 500ms;

}

.battery.low {

color: #c0392b;

}

.battery.low::after {

right: 80%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery.med {

color: #f39c12;

}

.battery.med::after {

right: 40%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery.full {

color: #27ae60;

}

.battery[data-charge=’0′],

.battery[data-charge=’1′],

.battery[data-charge=’2′],

.battery[data-charge=’3′] {

color: #c0392b;

}

.battery[data-charge=’4′],

.battery[data-charge=’5′],

.battery[data-charge=’6′] {

color: #f39c12;

}

.battery[data-charge=’7′],

.battery[data-charge=’8′],

.battery[data-charge=’9′],

.battery[data-charge=’10’] {

color: #27ae60;

}

.battery[data-charge=’0′]::after {

right: 100%;

}

.battery[data-charge=’1′]::after {

right: 85%;

}

.battery[data-charge=’2′]::after {

right: 80%;

}

.battery[data-charge=’3′]::after {

right: 70%;

}

.battery[data-charge=’4′]::after {

right: 60%;

}

.battery[data-charge=’5′]::after {

right: 50%;

}

.battery[data-charge=’6′]::after {

right: 40%;

}

.battery[data-charge=’7′]::after {

right: 30%;

}

.battery[data-charge=’8′]::after {

right: 20%;

}

.battery[data-charge=’9′]::after {

right: 10%;

}

.battery[data-charge=’10’]::after {

right: 0%;

}

/*纵向*/

.battery1 {

color: #34495e;

border: 1px solid currentColor;

display: inline-block;

width: 50px;

height: 20px;

position: relative;

border-radius: 2px;

display: border-box;

margin: 30px;

transform: rotate(-90deg);

/* transition: color 500ms; */

}

.battery1::before,

.battery1::after {

content: “”;

position: absolute;

}

.battery1::before {

top: 2px;

bottom: 2px;

right: -3px;

width: 1px;

display: border-box;

border: 1px solid currentColor;

border-left: 0;

}

.battery1::after {

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: 1px;

border-radius: 1px;

background-color: currentColor;

transition: right 500ms;

}

.battery1.low {

color: #c0392b;

}

.battery1.low::after {

right: 80%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery1.med {

color: #f39c12;

}

.battery1.med::after {

right: 40%;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.battery1.full {

color: #27ae60;

}

.battery1[data-charge=’0′],

.battery1[data-charge=’1′],

.battery1[data-charge=’2′],

.battery1[data-charge=’3′] {

color: #c0392b;

}

.battery1[data-charge=’4′],

.battery1[data-charge=’5′],

.battery1[data-charge=’6′] {

color: #f39c12;

}

.battery1[data-charge=’7′],

.battery1[data-charge=’8′],

.battery1[data-charge=’9′],

.battery1[data-charge=’10’] {

color: #27ae60;

}

.battery1[data-charge=’0′]::after {

right: 100%;

}

.battery1[data-charge=’1′]::after {

right: 85%;

}

.battery1[data-charge=’2′]::after {

right: 80%;

}

.battery1[data-charge=’3′]::after {

right: 70%;

}

.battery1[data-charge=’4′]::after {

right: 60%;

}

.battery1[data-charge=’5′]::after {

right: 50%;

}

.battery1[data-charge=’6′]::after {

right: 40%;

}

.battery1[data-charge=’7′]::after {

right: 30%;

}

.battery1[data-charge=’8′]::after {

right: 20%;

}

.battery1[data-charge=’9′]::after {

right: 10%;

}

.battery1[data-charge=’10’]::after {

right: 0%;

}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/171046.html原文链接：https://javaforall.cn