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

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';

页面调用

横向没有小数点

:max="50"

:int="true"

:single="10"

:h="80"

:active="36"

:styles="styles"

@value="horizontaNoPointMethods"/>

横向有小数点

: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

最小值

max

100

最大值

int

true

是否开启整数模式

direction

'vertical'

'vertical' 纵向，'horizontal' 横向

single

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

自定义高度，当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

字体大小

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

css html 实现刻度,vue语法css实现刻度尺相关推荐

Web-big、html、css、JavaScript、vue、webpack、git、微信小程序、uni-app、性能优化、兼容性、网络请求、web安全、其他
文章目录 01.HTML基础 1.行内元素有哪些?行内块元素有哪些?块级元素有哪些? 空(void)元素有哪些? 2.页面导入样式时,使用link和@import有什么区别? 3.title与h1的区 ...
VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式.Style样式一.背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue ...
CSS选择器与Xpath常用语法及对比
文章目录写在前面 CSS选择器基本语法一些不足 Xpath查询基本语法二者的主要对比相同不同语法方面写在前面写爬虫时候经常遇到HTML元素的定位问题,针对这个问题,主流的两种思路是CS ...
css html 语法,CSS基础语法
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式.CSS在Web设计领域是一个突破.利用它可以实现修改一个小的样式更新与之相关的所有页面元素.关于css语法你知道有哪些?下面yjb ...
Vue中CSS模块化最佳实践
Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节 ...
系列九、vue中css样式字体设置为华文行楷
一.下载华文行楷字体 # 下载地址 https://file.diyiziti.com/front/download/common/download?id=91# 百度网盘分享地址链接:https: ...
【前端基础】12.CSS 基础知识学习——基本语法结构
视频目录一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则二,字体样式 1.fon ...
前端知识——css 之预处理器 less 语法
目录 1. less 语法 1.1 变量(Variables) 1.2 嵌套(Nesting) 1.3 运算(Operations) 1.4 混合(Mixins)和映射(Maps) 1.5 其他语法补 ...
vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .welcome { width: 420px; height: ...

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

css html 实现刻度,vue语法css实现刻度尺相关推荐

最新文章

热门文章