微信小程序纯css实现刻度尺

最近需要实现一个高度定制的刻度尺，但是网上现成的方案却是极少，最终找到了HaoTian的wx-scale。但是没有实现竖向的效果而且刻度范围大时，在安卓机上无法渲染完全（找了很久没有找到原因，猜测是canvas无法在一瞬间同时刻画多个刻度，知道问题的欢迎留言告知）。于是纯css自己实现一个。

1.效果图

微信开发者工具查看效果

2.使用

在需要引用的json页面添加

// index
{"navigationBarTitleText": "w-scale","usingComponents": {"scale": "/component/w-scale/w-scale"}
}

然后页面调用

<view class='container'><view class='scale-title'>你的体重</view><view class='scale-value'>{{weight}}kg</view> <scale min="30" max="200" int="{{false}}" step="1" fiexNum="60" single="10" h="60" active="{{weight}}" styles="{{styles}}" id="weight"bindvalue="bindvalue"></scale><view class='scale-title'>你的身高</view><view class='scale-container'><view class='scale-value'>{{height}}cm</view> <view class='scale-view'><scale min="80" max="230" int="{{false}}" step="1" fiexNum="60" single="10" h="40" active="{{height}}" styles="{{styles}}" direction="vertical"id="height"bindvalue="bindvalue"></scale></view></view>
</view>

Page({data: {weight: 70,height: 180,styles: {line: '#dbdbdb',bginner: '#fbfbfb',bgoutside: '#ffffff',font: '#404040',fontColor: '#404040',fontSize: 16}},bindvalue(e) { //滑动回调const value = e.detail.value;const key = e.currentTarget.id;const data = {};data[key] = value;this.setData(data);}
})

3.参数说明

参数名	默认值	说明
`min`	0	最小值
`max`	100	最大值
`int`	true	是否开启整数模式
`direction`	‘vertical’	‘vertical’ 纵向，‘horizontal’ 横向
`single`	10	单个格子的实际长度（单位px）一般不建议修改
`h`	80	自定义高度，当direction='vertical’时未宽度
`active`	（min+max）/2	自定义选中位置 ,有效值min-max
`styles`	{…}	自定义卡尺样式

style选项

参数名	默认值	说明
`line`	#dbdbdb	刻度颜色
`bginner`	#fbfbfb	前景色颜色
`bgoutside`	#dbdbdb	背景色颜色
`lineSelect`	#6643e7	选中线颜色
`fontColor`	#404040	刻度数字颜色
`fontSize`	16	字体大小

查看完整代码

如果我的代码对你帮助，请给分start吧。^-

有不对或者什么问题，都可以留言

微信小程序纯css实现刻度尺相关推荐

微信小程序纯css制做跑马灯效果
效果思路太多案例都是js操作了,我真的看不懂,偶然看到有人用css做,但是不太合我心意,我的这个noticeBar两端是有间距的,方便可以放点slot.类似于有赞的效果: 利用动画@keyfram ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
微信小程序-H5-uniapp css制作上下跳动的柱状图——频谱
当前端开发一些H5或者微信小程序页面的时候,总会遇到一些奇怪的设计,他的音乐关闭按钮不用转圈的音符,那只要加入旋转动画+切换音符图片即可. 那么当要制作一些上下跳动的柱状图(频谱)的话我们需要怎么做呢 ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
微信小程序css内边距能么调,微信小程序中CSS的内边距和圆框
问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高.光有浮动是远远不够的,如果一个板块内的组件过多就会变得混乱.所以就需要用设置内边框来调整位置.微信小程序中会 ...
微信小程序实现css样式搭建（如三角形、正方形、圆形等）
参考链接: (1)微信小程序样式三角形搭建 http://www.voidcn.com/article/p-ngycxoje-brw.html [原文] http://blog.csdn.net/u0 ...

微信小程序纯css实现刻度尺

微信小程序纯css实现刻度尺

1.效果图

2.使用

3.参数说明

微信小程序纯css实现刻度尺相关推荐

最新文章

热门文章