<!--components/form-ruler/form-ruler.wxml-->
<view class="show-data">
  <slot name="before"></slot>
  <text class="value">{{value}}</text>
  <slot name="after"></slot>
</view>
<view class="form-ruler" style="--tick-width:{{rect.gap}}px;">
  <scroll-view class="form-ruler__inner scrollable" type="list" scroll-x enhanced enable-flex show-scrollbar="{{false}}" scroll-into-view="{{initialValue}}" scroll-into-view-alignment="center" scroll-into-view-offset="{{rect.gap / -2}}" 	scroll-into-view-within-extent="{{false}}" bindscroll="onScrollUpdate" 	bind:scrollend="onScrollEnd">
    <view id="min" class="form-ruler__offset-left" style="width:{{rect.width / 2}}px;"></view>
    <view wx:for="{{axis}}" wx:key="{{item.id}}" class="form-ruler__axis" id="{{prefix + index}}">
      <view class=" {{item.type}}">
        <text wx:if="{{item.type === 'integer'}}">{{item.value}}</text>
      </view>
    </view>
    <view id="max" class="form-ruler__offset-right" style="width:{{(rect.width - rect.gap) / 2}}px;"></view>
  </scroll-view>
</view>