小程序笔记(八)之wxss实现手机信号图标

一.前言
楼主在实际开发过程中，遇到要显示设备信号强度的需求，本来想着用数字来表示，但是对于用户来说，图标相对数字更加直观，一开始打算用图片，做一个简单粗暴的替换，效果是实现了，但是不怎么合理，还是需要样式来实现合理点

二.实现过程
1.信号强度多数是4-5个垂直条来表示，这里面可以有认为4个view，每个view之间的间距为0，每个view宽度一致，高度递增，但是要怎么限制4个view之间的排列方式，可以在外边再套上一个view，设置他的显示方式为row
2.具体代码

<view class="signalView">
  <view class="{{one?'signal_view_on':'signal_view_off'}}"></view>
  <view class="{{two?'signal_view_on':'signal_view_off'}}"></view>
  <view class="{{three?'signal_view_on':'signal_view_off'}}"></view>
  <view class="{{four?'signal_view_on':'signal_view_off'}}"></view>
</view>

.signalView {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}

.signal_view_on {
  width: 10rpx;
  height: 17rpx;
  background: #3EA24A;
}

.signal_view_on:nth-child(2) {
  height: 25rpx;
}

.signal_view_on:nth-child(3) {
  height: 30rpx;
}

.signal_view_on:nth-child(4) {
  height: 37rpx;
}

.signal_view_off {
  width: 10rpx;
  height: 17rpx;
  background: #151A28;
  opacity: 0.3;
}

.signal_view_off:nth-child(2) {
  height: 25rpx;
}

.signal_view_off:nth-child(3) {
  height: 30rpx;
}

.signal_view_off:nth-child(4) {
  height: 37rpx;
}

3.至于控制信号值的亮与暗，楼主遇到的事4格信号值，所以采用的是用一个布尔变量来控制对应的垂直条