本文共 3661 字，大约阅读时间需要 12 分钟。

完成效果：

在web页面中，如果我们要实现左右滑动的效果，只需要在css中写上： overflow: hidden; overflow-x: scroll; 就可以达到效果。但是在快应用中，不支持overflow命令。

所以这里用canvas画图来实现：监听手指左右滑动的事件，手指每滑动一次，重新绘制一次尺子 从而给人视觉上滑动的效果。

核心代码：

template：

   
        
           
   
          
    
              
     
                
      
       {
  {shortDate==today?'今天':shortDate.substr(0,4)+"年"+shortDate.substr(4,2)+"月"+shortDate.substr(6,2)+"日"}}
                    
     
              
     
                  
                    
     
          
    
          
    
              
     
                
                      
      
                  
       
        {
  {foodInfo.FoodName}}
                         
       
        {
  {foodInfo.Calory}}千卡/{
  {foodInfo.Weight}}{
  {foodInfo.UnitName}}
                       
      
              
     
              
     
                
                    
     
              
     
                
                    
     
          
    
                    
    
              
     
                
      
       {
  {(weight_initParams.count*(weight_initParams.minScale)).toFixed(1)}}
                      
      
       {
  {activeUnitInfo.UnitName}}
                    
     
              
     
                
      
       约{
  {((activeUnitInfo.Calory/activeUnitInfo.Amount)*(weight_initParams.count*(weight_initParams.minScale))).toFixed(1)}}千卡 {
  {((activeUnitInfo.Weight/activeUnitInfo.Amount)*(weight_initParams.count*(weight_initParams.minScale))).toFixed(1)}}{
  {foodInfo.UnitName}}
                    
     
              
     
                
                    
     
          
    
          
    
             
     
              
      
       {
  {$item.UnitName}}
                  
     
          
    
             
              
   

Css:

.cover{
   width:100%;height: 100%;background-color: #000000;position: fixed;top: 0px;left: 0px;opacity: 0.7}.Choice_count{
   width: 100%;height:840px;position: fixed;bottom: 0;left: 0;background-color: #ffffff;flex-direction: column;border-top-left-radius:20px;border-top-right-radius:20px}.date_title{
   width:100%;height:120px;border-bottom: 1px solid #EAE5DD;align-items: center;}  .dateText{
   font-size:36px;color: #473B1D;position:absolute;}  .date{
   width:100%;height: 120px;position: relative;align-items: center;justify-content: center;}   .foodUnit{
   width:140px;align-items: center;justify-content: center;}  .foodUnit text{
   lines:1;text-overflow:ellipsis;}  .button{
   background-color: #FFD359;width:100%;height: 105px;font-size: 32px;color: #473B1D;font-weight: bold;position:absolute;bottom: 0;left: 0;}  .unitList{
   align-items:center;justify-content: center;}  .unit{
   padding:10px,0;color:#473b1d;font-size: 32px;}  .unitActive{
   padding:10px,0;color:#ffd359;font-weight:bold;font-size: 32px;}  .amount_module text{
   color:#473b1d;font-weight:700}  .amount_module{
   width:100%;justify-content:center;align-items:flex-end;font-family:'Microsoft YaHei';}  .rule_module{
   width:100%;background-color:#fff;flex-direction:column;align-items: center;}  .amount{
   font-size:72px;font-weight:700;position:relative;top:12px;margin-right:6px}  .ruler{
   margin-top:6px}  .new-canvas{
   margin-top:20px;height:200px;width:1000px}  .food_detail{
   align-items: center;height:160px;justify-content:space-between;}  .images{
   height: 120px;;position: absolute;right:20px;padding:20px;align-items: center}  .images image{
   height:34px}

script：

代码中

img.src = ‘…/Common/ruler.png’ //加载本地图片 … cxt.drawImage(img, (count * -24) + (i * 240), 0); //绘制图片 图片如下：

在刚开始实现尺子效果时，我并没有用到图片来画，是用canvas的画笔 line 线条来画的尺子，每滑动一次，就用线条绘制整个尺子效果，很耗性能，画面非常卡顿。后来再做优化的时候，尝试通过借助图片来画，可以流畅运行。

这里贴上的代码，是我从项目里摘出来实现尺子效果的核心代码，并不能直接运行。仅供一个实现思路和流程。

转载地址：http://bomen.baihongyu.com/