css html 实现刻度,vue语法css实现刻度尺

更新记录

1.0.2(2021-04-09)

滑动小于半个格时，刻度线不会回弹问题

1.0.1(2021-03-28)

vue语法css实现刻度尺

横向整数、小数点

竖向整数、小数点

查看更多

平台兼容性

app

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

×

√

√

√

√

√

×

h5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

IE

Edge

Firefox

pc-Safari

×

×

×

×

×

×

×

×

×

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

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

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

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

1.效果图

2.使用

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

import vueScale from '@/components/sapling-vue-scale/sapling-vue-scale.vue';

页面调用

横向没有小数点

{{horizontaNoPointVal}}

:max="50"

:int="true"

:single="10"

:h="80"

:active="36"

:styles="styles"

@value="horizontaNoPointMethods"/>

横向有小数点

{{horizontaPointVal}}

:max="50"

:int="false"

:single="10"

:h="80"

:active="36.1"

:styles="styles"

@value="horizontaPointMethods"/>

components: {

vueScale,

},

data() {

return {

weight: 11,

height: 180,

styles: {

line: '#dbdbdb',

bginner: '#fbfbfb',

bgoutside: '#ffffff',

font: '#404040',

fontColor: '#404040',

fontSize: 16,

},

horizontaPointVal: '',

horizontaNoPointVal: '',

};

},

methods: {

// 横向滚动有小数点

horizontaPointMethods(msg) {

this.horizontaPointVal = msg;

},

// 横向滚动没有小数点

horizontaNoPointMethods(msg) {

this.horizontaNoPointVal = msg;

},

},

3.参数说明

参数名

默认值

说明

min

0

最小值

max

100

最大值

int

true

是否开启整数模式

direction

'vertical'

'vertical' 纵向，'horizontal' 横向

single

10

单个格子的实际长度(单位px)一般不建议修改

h

80

自定义高度，当direction='vertical'时未宽度

active

(min+max)/2

自定义选中位置 ,有效值(min-max)、min、max、center

styles

{...}

自定义卡尺样式

scroll

true

true代表不禁止滑动

style选项

参数名

默认值

说明

line

#dbdbdb

刻度颜色

bginner

#fbfbfb

前景色颜色

bgoutside

#dbdbdb

背景色颜色

lineSelect

#6643e7

选中线颜色

fontColo

#404040

刻度数字颜色

fontSiz

16

字体大小

有不对或者什么问题，可以直接留言。