csshtml实现刻度,vue语法css实现刻度尺更新记录
1.0.2(2021-04-09)
滑动⼩于半个格时,刻度线不会回弹问题
1.0.1(2021-03-28)
vue语法css实现刻度尺
横向整数、⼩数点
北京空气质量预报竖向整数、⼩数点
查看更多
平台兼容性
app
微信⼩程序
⽀付宝⼩程序
百度⼩程序
字节⼩程序
QQ⼩程序
快应⽤
×
√
√
√
√
√
×
史前怪兽h5-Safari
周庄好玩吗Android Browr
微信浏览器(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="fal"
: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) {