微信小程序实现带刻度尺滑块--滑动标尺/刻度尺（身高、体重选择器）

weixin_46265708

已于 2023-10-30 14:47:36 修改

阅读量3k

点赞数 4

分类专栏：微信小程序文章标签：微信小程序小程序前端动画

于 2023-08-18 11:15:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46265708/article/details/132356074

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在微信小程序中实现身高、体重刻度尺选择效果的思路与代码。利用scroll - view组件实现滑动，用for循环生成竖杠刻度。重点解决了刻度指针与数值匹配的问题，给出了从值到像素及从像素到值的计算公式，还提出了精确到一位小数的扩展思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本来吧，像这种身高、体重的选择，我感觉一个数字滚轮就很不错，奈何UI给我出难题非要做一个刻度尺。

思路

这刻度尺不就是一堆竖杠，每个竖杠直接间隔相同，并且间隔和数值匹配起来嘛。这样想实现起来就容易了，利用微信小程序scroll-view组件实现滑动效果，竖杠用for循环，我这里对身高体重的精度是直接到整数的，所以间隔每个竖杠直接间隔的数值是1，间距可以自己订。

但是。。。。。

做到一半发现还有一个刻度指针，这才是重点，要让指针指向的刻度值和数值匹配，这就需要你上边设置的刻度间隔必须准确

直接上代码

wxml:

<view class="flex-col self-center section_8 space-y-8">
        <view class="flex-col section_9 space-y-8">
          <view class="flex-row justify-evenly items-center self-center section_10">
            <text class="font_2">身高：</text>
            <text class="font_4 text_6">{{basicInfo.height}}</text>
            <text class="font_5 text_7">cm</text>
          </view>
          <view class=" section_11 space-y-4" style="height: 150rpx">
            <view class="cur">
              <view class="cur_val" style="margin-left: 155px;"></view>
            </view>
            <scroll-view scroll-x="true" scroll-left="{{heightSalNum}}" scroll-with-animation='true' catchscroll="bindscroll" throttle="{{false}}">
              <view style="background: white; justify-content: center; align-items: flex-start;  display: inline-flex">
                <view class="{{index%10 == 0 ? 'cursor_lang' : 'cursor'}}" wx:for="{{300}}" wx:key="index">
                  <view wx:if="{{(index)%10==0}}" class="cursor_text">{{index}}</view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>

cur是指针容器,因为我给他规定了宽度是310px，所以给他的子元素也就是指针给了一个距离左边155px,让他居中，当然你也可以用简单点的方式，比如flex

scroll-view是刻度容器，scroll-left指定起始位置，里边使用for循环做了300个刻度，没10个显示刻度值

css:

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-center {
  align-items: center;
}

.self-center {
  align-self: center;
}

.section_9 {
  width: 310px;
  padding-top: 16.67rpx;
  background-color: #ffffff;
  overflow: hidden;
  border-top: solid 2.08rpx #d4d4d4;
}

.space-y-8>view:not(:first-child),
.space-y-8>text:not(:first-child),
.space-y-8>image:not(:first-child) {
  margin-top: 16.67rpx;
}

.section_10 {
  padding: 8.33rpx 0;
  background-color: #ffffff;
  overflow: hidden;
  width: 197.92rpx;
}

.font_2 {
  font-size: 29.17rpx;
  font-family: HarmonyOS Sans SC;
  line-height: 27.08rpx;
  color: #000000e6;
}

.font_4 {
  font-size: 37.5rpx;
  font-family: HarmonyOS Sans Condensed;
  line-height: 27.08rpx;
  color: #22c1b1;
}

.text_6 {
  line-height: 28.13rpx;
}

.font_5 {
  font-size: 33.33rpx;
  font-family: HarmonyOS Sans SC;
  line-height: 18.75rpx;
  color: #000000e6;
}

.text_7 {
  line-height: 17.71rpx;
}

.section_11 {
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
}

.space-y-4>view:not(:first-child),
.space-y-4>text:not(:first-child),
.space-y-4>image:not(:first-child) {
  margin-top: 8.33rpx;
}


.cur {
  position: absolute;
  width: 310px;
  height: 38px;
  z-index: 10;
  display: flex; 
  /* justify-content: center; */
  pointer-events:none;
}

.cur_val {
  width: 0px;
  border: 0.50px #22c1b1 solid;
}

.cursor {
  width: 10px;
  height: 24px;
  border-left: 1px #D9D9D9 solid
}

.cursor_lang {
  width: 10px;
  height: 32px;
  border-left: 2px #D9D9D9 solid
}

.cursor_text {
  color: #B3B3B3;
  font-size: 12px;
  font-family: HarmonyOS Sans SC;
  font-weight: 400;
  line-height: 12px;
  word-wrap: break-word;
  display: flex;
  justify-content: center;
  margin-top: 80rpx;
  width: 80rpx;
  margin-left: -40rpx;
}

js:

this.setData({
        heightSalNum: height * 10 - 155,
})

这里计算其实位置：

height是你后台穿过来的身高，因为我每个刻度间隔设置的是10px并且指针的位置在距离左侧155px的位置，所以得出公式 height * 10 - 155

像这样

scroll-view的起始位置，移动距离等等都是基于像素，也就是你得到的值都是像素

比如当我们的值是177时，scroll-view的起始位置（像素）就因该是177*10（我们设置的每个空的像素），也就是起始位置是1770px

此时得到了scroll-view的起始位置，但是由于scroll-view的起始位置参照的是元素最左侧和位于元素中间的指针位置差了155px，起始位置为1770px的时候指针位置就成了1770px + 155px,指针指向的刻度也成了(1770px + 155px)/10

所以在这我们需要从起始位置减去指针和起始位置的间距

最后就得出了上边的公式：height * 10 - 155

  //身高卡尺
  bindscroll: function (e) {
    // 移动距离
    let left = e.detail.scrollLeft;
    let curVal = Math.round((left + 155) / 10);
    this.setData({
      ['basicInfo.height']: curVal
    })
  },