HTML移动端 实现刻度尺效果

前言

在薄荷app的用户信息页看到在记录身高时，利用左右滑动刻度尺来取值。原本以为是h5实现，但上网搜索后并没有找到相关博客和文章，倒是有很多android的控件实现。所以就想自己实现一个看看。

需求

因为只是做一个demo，那就实现简单的效果就可以：
1. 刻度区间[0，100]
2. 有倒三角标记，指示当前刻数
3. 用户左右滑动刻度尺区域，能够动态获取倒三角指示的刻数

效果图

实现过程

以下讲述关键的实现步骤，也可以直接下载文章最后的github源码。

页面绘制

页面其实很好绘制，一个刻度文本节点和一个包裹刻度尺的

容器。难点在于刻度尺的展示和倒三角的实现。

• 倒三角的实现

//html
<div id="triangle"></div>

//css样式
#triangle {
    width: 0;
    height: 0;
    margin: 0 auto;
    z-index: 199;
    border-top: 1rem solid rgb(190, 98, 75);
    border-left: 1rem solid transparent;
    border-right