微信小程序純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>

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.參數說明

參數名	默認值	說明
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吧。^-

有不對或者什么問題，都可以留言