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);
}