实现的两种方式

实现方法

1.通过uniapp提供的swiper组件实现
uniapp swiper文档：https://uniapp.dcloud.net.cn/component/swiper.html
2.通过uniapp提供的movable-view组件实现
uniapp movable-view文档：https://uniapp.dcloud.net.cn/component/movable-view.html

1.通过uniapp提供的swiper组件实现

文档：

思路：可以把尺子的每一个刻度看作一个swiper-item，需要多少多度，就使用for循环渲染几个swiper-item

比如我需要100个刻度 ：（因为没有样式所以看不出来效果，可以在控制台看到）

      
            <swiper
              :display-multiple-items="40"
              :interval="interval"
              :duration="duration"
              @change="onChangeE"
              :current="70"
              style="height: 114rpx"
              :previous-margin="50"
              :next-margin="50"
            >
              <!-- 留30刻度以便可以左滑到底-->
              <swiper-item
                v-for="(item, index) in 100"
                :key="index"
                style="overflow: visible"
              >
                
              </swiper-item>
            </swiper>

控制台：
第二步加上刻度线

 <swiper
              :display-multiple-items="40"
              :interval="interval"
              :duration="duration"
              @change="onChangeE"
              :current="70"
              style="height: 114rpx"
              :previous-margin="50"
              :next-margin="50"
            >
              <!-- 留30刻度以便可以左滑到底-->
              <swiper-item
                v-for="(item, index) in 150"
                :key="index"
                style="overflow: visible"
              >
                <view class="swiper-item">
                  <view
                    class="zoro-line"
                    :class="
                      index % 10 == 0 || index % 10 == 5
                        ? 'num-line-6'
                        : 'num-line-3'
                    "
                  ></view> 
                
                  <block v-if="index > 10 && index < 140">
                    <view class="text-num-init" v-if="(index / 10) % 1 == 0">
                      <view
                        class="zoro-line-num"
                        :class="index / 10 >= 20 ? 'big-line-num' : ''"
                        >{{ index + 20 }}</view
                      >
                    </view>
                  </block>
                </view>
              </swiper-item>
            </swiper>

// 轮播插件
.rulerContainer {
  text-align: center;
  background-color: #f3f8ec;
  position: relative;
}
.text-top-icon {
  width: 30rpx;
  height: 54rpx;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -15rpx;
  z-index: 1;
}
.rulerContainer uni-swiper {
  height: 114rpx;
}
.rulerContainer .icon-top-img {
  width: 30rpx;
  height: 54rpx;
}
.swiper-item {
  width: 1rpx;
  height: 80rpx;
  margin: 0 auto;
}

.rulerContainer uni-swiper-item {
  overflow: initial;
}
.rulerContainer .zoro-line {
  position: relative;
  width: 1rpx;
  text-align: center;
  background-color: #88bd42;
  height: 40rpx;
  margin: 0 auto;
}

.rulerContainer .num-line-3::before,
.rulerContainer .num-line-5::before,
.rulerContainer .num-line-7::before,
.rulerContainer .num-line-9::before,
.rulerContainer .num-line-11::before,
.rulerContainer .num-line-13::before {
  height: 40rpx;
}

.rulerContainer .num-line-6,
.rulerContainer .num-line-10 {
  /* height: 60rpx; */
  /* border-width: 5rpx; */
  position: relative;
  width: 1rpx;
  text-align: center;
  background-color: #88bd42;
  height: 55rpx;
  margin: 0 auto;
}

.rulerContainer .num-line-1::before,
.rulerContainer .num-line-15::before {
  height: 32rpx;
  /* border-width: 5rpx; */
}
.rulerContainer .num-line-12::before,
.rulerContainer .num-line-4::before {
  height: 38rpx;
}

.rulerContainer .num-line-8::before {
  height: 48rpx;
  /* border-width: 5rpx; */
}

.rulerContainer .num-line-2::before,
.rulerContainer .num-line-14::before {
  height: 32rpx;
}

.rulerContainer .zoro-line-num {
  top: 50rpx;
  width: 100rpx;
  left: 50%;
  position: absolute;
  top: 70rpx;
  color: #b3b3b3;
  font-size: 24rpx;
  text-align: center;
  margin-left: -50rpx;
}
.rulerContainer .big-line-num {
  left: 14rpx;
}
.rulerContainer .text-num-init {
  text-align: left;
  width: 100%;
  display: block;
  height: 100%;
  color: #969695;
  font-size: 20rpx;
}
.pleftcss {
  margin: -20rpx;
  top: 20rpx;
}

执行页面效果这时候就可以出来了

下面就是js代码根据自己的业务需要去绑定函数

onChangeE(e){
console.log(e.detail.current)//左右滑动的刻度
}

这个方法到这里就结束了 有个缺点就是在小程序中 要是手机性能很差 ，尺子也比较多，会造成
首次进来会有长时间的白屏，这个问题目前还没有解决！！

通过uniapp提供的movable-view组件实现

文档：


思路：拖拽组件，把尺子看成一个整体让UI给一张图 通过计算得出刻度

<movable-area class="Rotation">
              <movable-view
                class="max"
                direction="horizontal"
                out-of-bounds="false"
                @change="onChange"
              >
                <image class="icon-top-img" src="" />
              </movable-view>
            </movable-area>

onChange(e){
console.log(e)偏移量
}

缺点就是计算的时候会有一点误差，有时候会有一点偏移，手机性能不行的话，计算的结果跟不上你滑动的，需要做一下防抖。
这里计算公式就不再贴出来

谢谢！！！！