ionic3滑动选择刻度尺效果

因为业务需要一个像刻度一样的效果用手或者鼠标按住刻度尺的部分左右滑动可以改变上面的数值的效果

首先创建ionic3项目：ionic start keduchi tabs 

目录如下：

需要用到的图片:

home.html：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    <div class="chi-box">
        <span>
            <span id="num">{{numText}} Kg</span>
        </span>
        <div id="ruler-container">
            <div id="triangle"></div>
            <div id="ruler" data-offset="-32.5" (touchstart)="touchstart($event)" [ngStyle]="{'transform': 'translateX(' + rulerLen + 'rem)'}">
                <ul id="ruler-ul"  (touchmove)="touchmove($event)">
                    <li *ngFor='let item of rulers'>
                        <span>{{item.num}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</ion-content>

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  choice: number = 1;
  swipe: number = 0;
  offsetX: number = 0;
  moveX = 0;
  moveBefore = 0;
  unit = 0.65;
  move: number = 0;
  rulerLen: any;
  numText: any = 50.0;
  rulers: any;
  constructor(public navCtrl: NavController) {
  }
  ngOnInit(){
      this.rulerLen = -32.5;
      this.rulers = [{
          num: 10
        },{
          num: 20
        },{
          num: 30
        },{
          num: 40
        },{
          num: 50
        },{
          num: 60
        },{
          num: 70
        },{
          num: 80
        },{
          num: 90
        },{
          num: 100
        }
      ]
  }
  onChange($event){
      console.log($event);
  }
  touchstart(e){
      // console.log(e);
      this.offsetX = e.touches[0].clientX;
      this.moveBefore = 0;
    }
    touchmove(e){
      // console.log(e)
      let ruler = document.getElementById('ruler');
      this.move = e.touches[0].clientX;
  
      let offset: any = ruler.dataset.offset;
      offset = parseFloat(offset);
      let tempMove = 0;
      let len: any = 0;
      len = offset + (tempMove - this.moveBefore);
      len = parseFloat(len);
  
      tempMove = this.move - this.offsetX;
      tempMove /= 10;
      //计算两次滑动间的距离
      len = offset + (tempMove - this.moveBefore);
      len = parseFloat(len);
      //边界判断，最大偏移长度65rem
      if (len - 0.0 < 0 && len > -65) {
          //将结果保存下来，下一次滑动时取出参与计算
          this.moveX = tempMove;
          ruler.dataset.offset = len;
          this.moveBefore = this.moveX;
          //设置样式
          this.rulerLen = len
          // //显示刻度，保留1位小数
          this.numText = -((len / this.unit).toFixed(1));
      }
  }

}

home.scss:

page-home {
    .chi-box{
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;
        margin: 5rem 0;
        #ruler-container {
            position: relative;
            overflow: hidden;
            // width: 20rem;
            width: 25rem;
            height: 10rem;
            padding-top: 1rem;
            #triangle {
                height: 3rem;
                width: 1px;
                background: #E86565;
                position: absolute;
                top: 0.5rem;
                left: 50%;
                z-index: 1;
            }
            #ruler{
                ul {
                    transform: translateX(12.5rem);
                    width: 100rem;
                    height: 4rem;
                    position: relative;
                    li{
                        width: 6.5rem;
                        height: 5rem;
                        text-align: right;
                        background: url(../../assets/imgs/ruler.png) top left no-repeat;
                        background-size: 100% auto;
                        float: left;
                        list-style: none;
                        span {
                            position: relative;
                            top:2rem;
                            right: -0.3rem;
                        }
                    }
                }
            }
        }
    }
}