右滑开锁-小程序

 <view class='slideBox'>
        <view class='slide' catchtouchmove='touchmoveTap' catchtouchend='touchendTap' catchtouchstart='touchstartTap' style='left:{{moveToLeft}}px'>
        <icon></icon></view>右滑开锁
      </view>

data:{
    moveToLeft:0,//滑动距离
    starX:0,//初始距离
    slideBoxWidth:0,
    slideWidth: 0
},
  touchstartTap(e){
    console.log('zzzz:' + e.changedTouches[0].pageX)
    let starX = e.changedTouches[0].pageX;
    this.setData({
      starX: starX
    })
  },
  touchmoveTap(e){
    console.log('yyyy:' + e.changedTouches[0].pageX)
    let ToLeft = e.changedTouches[0].pageX-this.data.starX;//变化后的坐标减去初始坐标
    let slideBoxW = Math.floor(this.data.slideBoxWidth - this.data.slideWidth-1);//计算大盒子宽度
    if (ToLeft<0)
      ToLeft=0;//滑块不能超出大盒子左边
    if (ToLeft > slideBoxW)
      ToLeft = slideBoxW;//滑块不能超出大盒子右边
    this.setData({
      moveToLeft: ToLeft
    })
  },
  touchendTap(){//离开的时候回到初始位置
    this.setData({
      moveToLeft: 0
    })
  }
//下面是小程序中计算dom节点数据的api
 onLoad: function (options) {
    var _this = this;
    wx.createSelectorQuery().selectAll('.slideBox').boundingClientRect(function (rects) {
      rects.forEach(function (rect) {
        // rect.id      // 节点的ID
        // rect.dataset // 节点的dataset
        // rect.left    // 节点的左边界坐标
        // rect.right   // 节点的右边界坐标
        // rect.top     // 节点的上边界坐标
        // rect.bottom  // 节点的下边界坐标
        // rect.width   // 节点的宽度
        // rect.height  // 节点的高度
        _this.setData({
          slideBoxWidth: rect.width
        })
      })
    }).exec()
    wx.createSelectorQuery().selectAll('.slide').boundingClientRect(function (rects) {
      rects.forEach(function (rect) {
        _this.setData({
          slideWidth: rect.width
        })
      })
    }).exec()
    

  }

.m-lock .slideBox{
  height:43px;
  border:1px solid #D5D3E2;
  margin:20px 0;
  line-height:43px;
  background:#D0CAEC;
  color:#fff;
  font-size:16px;
  position:relative;
}
.m-lock .slide{
  height:43px;
  width:30%;
  background:#fff;
  position:absolute;
  top:0px;
  left:0;
}
.m-lock .slide>icon{
  width:0;
  height:0;
  border-width:10px;
  border-style:dashed dashed dashed solid;
  border-color:transparent transparent transparent #D0CAEC;
  position:absolute;
  top:50%;
  left:50%;
  margin:-10px 0 0 -5px;
}