Taro框架---左滑动删除

index.js

import Taro, { Component } from '@tarojs/taro'
import { View,ScrollView } from '@tarojs/components'
import './index.less'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  state = {
    animation:'',

    startX: 0, //开始坐标
    startY: 0,
  }

  componentWillMount () { }

  componentDidMount () { 
    // 页面渲染完成
    //实例化一个动画
    let animation = Taro.createAnimation({
      duration: 400, 
      timingFunction: 'linear',
      delay: 100,
      transformOrigin: 'left top 0',
      success: function(res) {
        console.log(res)
      }
    })

    this.setState({
      animation:animation
    })
  }
  

  // 滑动开始
  touchstart(e){
    this.setState({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      })
  }

  //滑动事件处理 _index当前索引
  touchmove(e) {
    var that = this;

    var startX = that.state.startX;//开始X坐标
    var startY = that.state.startY;//开始Y坐标
    var touchMoveX = e.changedTouches[0].clientX;//滑动变化坐标
    var touchMoveY = e.changedTouches[0].clientY;//滑动变化坐标
    // var isLeft = _class.indexOf("leftMove") != -1; //往左滑的位置
    // var isRight = _class.indexOf("rightMove") != -1;//往右滑的位置
    
    //获取滑动角度
    var angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
    //滑动超过30度角 return
    if (Math.abs(angle) > 30) return;
    //右滑
    if (touchMoveX > startX){
      console.log('右滑');
      //实例化一个动画
      let _animation = Taro.createAnimation({
        duration: 400, 
        timingFunction: 'linear',
        delay: 100,
        transformOrigin: 'left top 0',
        success: function(res) {
          console.log(res)
        }
      })

      _animation.translateX(0).step()
      that.setState({
        //输出动画
        animation: _animation.export()
      })
    }else if(touchMoveX - startX < -10){//左滑
      console.log('左滑');
        //实例化一个动画
      let _animation = Taro.createAnimation({
          duration: 400, 
          timingFunction: 'linear',
          delay: 100,
          transformOrigin: 'left top 0',
          success: function(res) {
            console.log(res)
          }
      })
  
      _animation.translateX(-80).step()
      that.setState({
          //输出动画
          animation: _animation.export()
      })
    }
  }

  /**
    * 计算滑动角度
    * @param {Object} start 起点坐标
    * @param {Object} end 终点坐标
    */
   angle(start, end) {
    var _X = end.X - start.X,
    _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
    }

  render () {
    return (
      <ScrollView className='history' scrollY>

        {/* 每一项 */}
        <View className='historyItem'>
          {/* 删除 */}
          <View className='itemDelete right'>删除</View>

          {/* 遮盖层 */}
          <View className='itemCover' onTouchStart={this.touchstart.bind(this)} onTouchEnd={this.touchmove.bind(this)} animation={this.state.animation}>显示的内容</View>
        </View>
      </ScrollView>
    )
  }
}

index.less

// 滑动
.historyItem{
    width: 750px;
    height: 173px;
    line-height: 173px;
    position: relative;
}
.historyItem .itemDelete{
    width: 160px;
    height: 173px;
    font-size:32px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:173px;
    text-align: center;
    background:rgba(246,83,79,1);
}
.historyItem .right{
    float: right;
}
.historyItem .itemCover{
    position: absolute;
    left: 0;
    top: 0;
    width: 750px;
    height: 173px;
    background:rgba(255,255,255,1);
    border-bottom: 1px solid rgba(242,242,242,1);
}