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

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

1.效果图

微信开发者工具查看效果

2.使用

在需要引用的json页面添加

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

然后页面调用

  你的体重
  {{weight}}kg 
  
  
  你的身高
  
    {{height}}cm 
    
      
    
  

js

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.参数说明

style选项

查看完整代码

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

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