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;
}
}
最后
好了 上面源码了 哈哈哈哈哈哈哈哈哈哈 唯一不足的又是命名 （😂😂😂）
然后有帮到的小伙伴 关注一下子呗
有了动力嘛 下回我就继续搞事情
