微信小程序用swiper实现滑动刻度尺

<view style="height:165rpx;positive:relative;">
  <view style="margin-bottom:20rpx;font-size:24rpx;position:absolute;width:570rpx;text-align: center;">
    <text style="color: #4377E9 " ><text style="font-size: 44rpx;font-family: DIN-Bold, DIN;font-weight: bold;color: #4377E9 ;line-height: 54rpx;">{{currentNumber}}</text> {{ unit }}</text>
    <text class="line"></text>
  </view>
  <swiper duration="10" class="swiperss" bindchange="getCurrent" display-multiple-items="{{multipleItems}}" easing-function = "linear" current="{{ current }}">
    <swiper-item class="swiperItems" wx:for="{{multipleItems + offset * 2}}" wx:key="index">
      <view wx:if="{{arr[item]!=''}}"   class="{{arr[item]%5==0?'linestwo':'lines'}}" ></view>
      <view style="color: #BBBEC3;">{{arr[item]%5==0?arr[item]:''}}</view>
    </swiper-item>
  </swiper>
</view>

.swiperss{
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}
.swiperItems{

  font-size:24rpx;
  position:relative;
  margin-top: 74rpx;
  border-top:1px solid #F5F7F9; 
  height: 120rpx !important;
  width: calc(570rpx / 19) !important;
  overflow: visible;
}
.swiperItems > .lines{
  background-color:#D2D6DF  ;
  margin-bottom: 10rpx;
  width:1px;height:35rpx;
  margin-left: 15rpx;
}
.linestwo{
  margin: 0 auto;
  width:1px;height:63rpx;
  background-color:#D2D6DF ;
  margin-left: 16rpx;
}
.lines + view{
  font-size: 24rpx;
  font-family: DIN-Regular, DIN;
  font-weight: 400;
  color: #D9D9D9;
  line-height: 30rpx;
  width: 100%;
  text-align: center;
}
.line{
  position: absolute;
  left:50.4%;
  top: 64rpx;
  transfORM: translateX(-50%);
  width: 5rpx;
  height: 40rpx;
  background: #43A3FF;
  box-shadow: 0px 0px 2rpx 0px #43A3FF;
  z-index: 6;
  margin-right: 10rpx;

}

// components/heightAndWeight/index.js
Component({
  
  properties: {
    min: {
      type: Number
    },
    max: {
      type: Number
    },
    unit: {
      type: String
    },
    currentNumber: {
      type: Number
    },
    multipleItems: {
      type: Number,
      value: 9
    },
    offset: {
      type: Number,
      value: 4
    }
  },
  observers: {
    "current": function (current) {
      console.log('current-----currentNumber---', current, this.data.currentNumber)
      if (current < this.data.offset) {
        this.setData({
          currentNumber: Math.max(this.data.currentNumber + current - this.data.offset, this.data.minNumber)
        })
      } else if (current > this.data.offset) {
        this.setData({
          currentNumber: Math.min(this.data.currentNumber + current - this.data.offset, this.data.maxNumber)
        })
      }
    },
    "currentNumber": function (currentNumber) {
      console.log('----currentNumber', currentNumber)
      let arr = []

      for (let l = parseInt(this.data.multipleItems / 2) + this.data.offset; l > 0; l--) {
        arr.push(currentNumber - l >= this.data.minNumber ? currentNumber - l : '')
      }

      arr.push(currentNumber)

      for (let l = 1; l <=  parseInt(this.data.multipleItems / 2) + this.data.offset; l++) {
        arr.push(currentNumber + l <= this.data.maxNumber ? currentNumber + l : '')
      }
      console.log('-----arr', arr)

      this.setData({
        arr,
        current: this.data.offset
      })

    }
  },
  attached() {
    console.log('this.DDDddddddddd', this.data.currentNumber)
    this.setData({
      minNumber: this.data.min,
      maxNumber: this.data.max,
      current: 0,
     
      arr: [],
    })
    
  },
  
  data: {
    minNumber: null,
    maxNumber: null,
    current: 0,
  
  
    arr: []
  },

  
  methods: {
    getCurrent(e) {
      this.setData({
        current: e.detail.current
      })
      console.log('eeeeeeeeeeeeee', e.detail.current, this.data.currentNumber)
      this.triggerEvent('currentNumber', {
        current: this.data.currentNumber
      })
    }
  }
})

<view class="flex" style="flex-wrap:wrap;margin-top: 20rpx">
    <height-weight3    offset="10"    min="1" max="150" unit="岁"  multipleItems="19"    currentNumber="{{ ageCurrentNumber }}"  style="width:570rpx;margin: 0 auto;" bind:currentNumber="getCurrentNumberAge"></height-weight3>
  </view>

getCurrentNumberAge(e){  //年龄
    console.log('获取当前current值年龄',e,e.detail.current)

    let result = e.detail.current;
    this.setData({
      age:result 
    })
  },