taro 右滑删除

需求是 右边滑动出现删除 类似qq列表

来废话不开腔 直接搞起 

 

下面是jsx

 

import React, { Component } from 'react';

import Taro from '@tarojs/taro';

import { View, Image, Text, ScrollView } from '@tarojs/components';

import classNames from 'classnames'

import { goToPage, srtreplace, formatTime } from '@/utils/index';

import './index.less'

 

class swipeActionTpl extends Component {

  

  static defaultProps = {

    item: {}, //操作对象

    index: '', // 操作下表

    isSlide:true, //可以滑动

    boxStyle:'',

    beforeList:[

      {beforeText:'删除',

      beforeStateType:'del',

      beforeStyle:{

        backgroundColor: '#FE5840',

        color:' #FFFFFF',

        width: '160rpx',

      },},

      // { beforeText:'取消',

      //   beforeStateType:'cancel',

      //   beforeStyle:{

      //     backgroundColor: 'rgb(165 161 161)',

      //     color:'#FFFFFF',

      //     width: '160rpx',

      //   },}

    ],

  }

 

  constructor(props) {

    super(props);

    this.state = {

      startX:0,

      startY:0,

      moveX:0,

      moveY:0,

      currentX:0,  // 计算距离

      itemstyle:{},

      beforestyle:{},

    }

  }

 

  componentDidMount () {

    let that =this

    that.setState({

      startX:0,

      currentX:0,

      moveX:0,

    },res =>{

      clearTimeout(t)

      var t = setTimeout(function(){

        clearTimeout(t)

        let query = Taro.createSelectorQuery()

        query.select('#swipe_action_beforeList').boundingClientRect(function (res) {

          console.log(res.width)

          let itemstyle ={

            webkitTransform: `translateX(${res.width}px)`,

            transform:` translateX(${res.width}px)`,

            marginLeft: `-${res.width}px`,

          }

          let beforestyle ={

            webkitTransform: `translateX(${res.width}px)`,

            transform:` translateX(${res.width}px)`,

          }

          that.setState({

            itemstyle,

            beforestyle

          })

        }).exec()

      },200)

    })

 

  }

 

  

  // 获取点击事件坐标

  handleTouchStart (event,e){

    if(e.touches.length==1){

      this.props.handleClick(event,'TouchStart')

      this.state.startX = e.touches[0].pageX

      this.state.startY = e.touches[0].pageY

    }

  }

 

  handleTouchMove (event, e) {

    let {isSlide} = this.props

    if(e.touches.length==1 && !!isSlide){

      var that = this,

      startX = that.state.startX,//开始X坐标

      startY = that.state.startY,//开始Y坐标

      touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标

      touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标

      angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY }); //获取滑动角度

      if (Math.abs(angle) > 30) return;

      this.props.handleClick({...event,angle,touchMoveX,startX},'TouchMove')

    }

  }

 

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

  }

 

  // 点击事件事件

  handleClick(event,e){

    e.preventDefault();

    e.stopPropagation();

    this.props.handleClick(event,'click')

  }

 

  // before 事件

  beforeClick(event,e){

    e.preventDefault();

    e.stopPropagation();

    let {item}= this.props

    this.props.beforeClick({...event,...{item}})

  }

 

  render () {

    let {boxStyle,beforeList,index,item} = this.props

    let {itemstyle,beforestyle} = this.state

    return (

    <View className="wih bz pore tole swipe_action_tpl" style={boxStyle} key={index}>

      <View className={`wih bz pore tole swipe_action_item tran ${!!item.isSlide ? 'swipe_action_tpl_active' : ''}`} style={itemstyle}

        onTouchStart={this.handleTouchStart.bind(this, {index,item})}

        onTouchMove={this.handleTouchMove.bind(this, {index,item})}

        onClick={this.handleClick.bind(this, {index,item})}

      >

        {this.props.renderContentchildren}

      </View>

 

      <View className={`hih bz poab swipe_action_beforeList dip ju_al tran ${!!item.isSlide ? 'swipe_action_tpl_active' : ''}`} id={`swipe_action_beforeList`} style={beforestyle}>

        {beforeList && beforeList.length >= 1 ? (beforeList.map((beforeitem,beforeindex) => (

          <View 

            key={beforeindex} 

            className={`hih bz swipe_action_beforeitem dip ju_al }`} 

            style={beforeitem.beforeStyle} 

            onClick={this.beforeClick.bind(this,{beforeitem,index})} 

            >

              {beforeitem.beforeText}

          </View>

        ))) : null}

      </View>

    </View>

    )

  }

}

 

export default swipeActionTpl

 

 

 

下面是less

 

.swipe_action_tpl {

  overflow: hidden;

  .swipe_action_item{

    overflow: hidden;

    min-width: 100%;

    z-index: 10;

  }

  .swipe_action_beforeList{

    opacity: 0;

    top:0rpx;

    right:0rpx;

    background: #fff;

    z-index:5;

    .swipe_action_beforeitem{

      font-size:32rpx;

      width:120rpx;

      font-family: PingFangSC-Regular, PingFang SC;

      font-weight: 400;

      text-align: center;

    }

    .swipe_action_beforedisabled{

      opacity: 0.5;

    }

  }

  .swipe_action_tpl_active {

    opacity: 1 !important;

    -webkit-transform: translateX(0) !important;

    transform: translateX(0) !important;

  }

}

 

最后

好了 上面源码了 哈哈哈哈哈哈哈哈哈哈 唯一不足的又是命名  （😂😂😂）

 

然后有帮到的小伙伴 关注一下子呗 

有了动力嘛 下回我就继续搞事情