微信小程序 刻度计/温度计组件（自用）

一.功能介绍

根据传入的最大值，最小值，当前值，满值情况显示几个个刻度展示温度计效果
UI设计图如下:（其中左边的刻度、中间橙色圆柱需由代码生成）

二. 代码设计

1.结构

2.组件代码

/* 
 *	wxml： ScaleMeter.wxml
*/
<view class="box">
  <view class="left">
    <view class="left_unitBox">
       <!-- eg:一共15个(1刻度6px)刻度，最上边最那行显示数值, 所以要 unitNum-1 -->
      <view class="left_unit" wx:for="{{unitNum!=0 && (unitNum - 1)}}" wx:key="*this"></view>
      <view class="left_current">
        <text class="current_text">{{baseInfo.scaleValue}}</text>
        <view class="current_line"></view>
      </view>
    </view>
  </view>
  <view class="right">
    <image src="{{img_meter_bg}}" mode="scaleToFill" class="right_meter_bg" bind:tap="changeNUm"></image>
    <view class="right_meter_scale" style="height: calc(6px * {{unitNum}})"></view>
  </view>
</view>


/* 
 *	JS： ScaleMeter.js
*/
JS: 
import {img_meter_bg} from '../../utils/imageSrc'  
Component({
  properties: {
    baseInfo: {
      min: Number,			// 最大值
      max: Number,			// 最小值
      scaleValue: Number,	// 当前值
      lineNum: {			// 总显示刻度数量
        type: Number,
        default: 0
      }
    }
  },
  data: {
    img_meter_bg, //背景图
    unitNum: -1,
  },
  observers:{
    'baseInfo': function(val){
      this.getUnitNum(val)
    }
  },
  methods: {
    getUnitNum(val){
      // 计算最终高度（即显示几个刻度单位）
      let num = (val.scaleValue - val.min) / (val.max - val.min) * val.lineNum
      this.setData({ unitNum: num })
    },
  }
})

/* 
 *	WXSS： ScaleMeter.wxss 
*/
.box{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  width: 50%;
  height: 100%;
  position: relative;
}
.left_unitBox{
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 10px;
  right: 5px;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-items: flex-end;
}
.left_current{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: 10px;
}
.current_text{
  font-size: 12px;
  margin-bottom: -6px;
  margin-right: 3px;
}
.current_line{
  width: 12px;
  height: 1px;
  background: #D9D9D9;
  border-radius: 8px 8px 8px 8px;
}
.left_unit{
  width: 8px;
  height: 1px;
  margin-top: 5px;
  background: #D9D9D9;
  border-radius: 8px 8px 8px 8px;
}
.right{
  width: 30%;
  margin-left: 3%;
  height: 100%;
  position: relative;
}
.right_meter_bg{
  width: 100%;
  height: 100%;
}
.right_meter_scale{
  width: 4px;
  background: #FF9900;
  border-radius: 6px 6px 6px 6px;
  opacity: 1;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%,0);
}

3.父元素调用

// father.json
"usingComponents": {
    "scale-meter": "/components/ScaleMeter/ScaleMeter"
 },

// father.wxml
<scale-meter baseInfo="{{scaleInfo}}"></scale-meter>

// father.js
scaleInfo: {
   min:0,
   max:100,
   scaleValue:63,
   lineNum: 15
 }