更新记录
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
字体大小
有不对或者什么问题,可以直接留言。