更新记录

1.0.0（2024-04-13）

无

平台兼容性

vue3语法微信小程序实现刻度尺

最近需要实现一个高度定制的刻度尺，但是网上现成的方案却是极少，找到过是原生微信开发的但不是 vue开发小程序。

本插件使用了vue语法和scroll-view标签以及其属性scroll-left。若想在除微信小程序其他小程序或项目中使用。只要是能满足以上两个条件均可使用该插件。

目前发现支付宝小程序、QQ小程序、字节跳动(今日头条)小程序 和 百度小程序 的开发文档中均有scroll-view标签和其属性scroll-left。因此这些小程序均可使用，可能在不同小程序中表现会有所差异，本人目前只是在微信小程序中使用。

1.使用

1. 将其当成自定义组件引入到项目中

导入slide-rulers组件

2. 页面调用

<template>
  <view class="content">
    <view>{{selectNumber}}</view>
    <view style="width: 80vw;">
    <!-- 整数 -->
    <slide-rulers
    :min="10"
    :max="200"
    :int="true"
    :active="50"
    @change-active="changeBdg"
    ></slide-rulers>
    <!-- 小数 -->
    <view style="margin-top: 200rpx;text-align: center;">{{selectNointNumber}}</view>
    <slide-rulers
    :min="1"
    :max="30"
    :int="false"
    :active="5.6"
    @change-active="changeP"
    ></slide-rulers>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('Hello')
const selectNumber = ref<number>(0)
const selectNointNumber = ref<number>(0)
function changeBdg(p: number) {
    selectNumber.value = p
    console.log(p, '213123213')
}
function changeP(p: number) {
    selectNointNumber.value = p
}
</script>

3.参数说明