关于react 写长按弹窗和单点事件一个调用思路

本是古典何须时尚 2021-07-24 23:30 343阅读 0赞

### 前言 ###

我想做一个长按1s弹出一个拟态框  
然后又可以单点 滑动又不想失效的事件

#### 以下是我的一个聊天列表 ####

<div className='Item noSel'
                     onTouchStart={(e) => this.onTouchStart(e,'/ChatInterface')}
                     onTouchMove={(e)=>this.onTouchMove(e)}
                     onTouchEnd={this.onTouchEnd}>
                    <div className='waterMask'/>
                    <div className='Item-left'>
                        <img className='Item-left-img' src={testimg}/>
                        <div className='flex flex-col hei-inh just-spa-aro ml10'>
                            <p className='flex ali-cen'>吕非<span className='fo-gray fo-12 ml6'>杭州若以文化</span></p>
                            <p className='fo-gray'>[已读]你好你好！！！</p>
                        </div>
                    </div>
                    <div className='Item-right'>
                        <span className='fo-gray fo-12'>昨天</span>
                    </div>
                </div>

#### 交互逻辑 ####

let timers = null;  // 防抖
    let touchType = 'shortTouch';   // 触摸类型是长按还是短按
    let toUrl = ''; // 要跳转的url
    let isTouchmoveing = false // 是否move中（用于判断是否执行单点操作）
    
    class ChatItem extends Component { 
        onTouchStart = (e,url) => { 
            toUrl = url;
            if (timers) return
            timers = setTimeout(() => { 
                clearTimeout(timers)
                timers = null
                touchType = "longTouch"
                console.log('1321')
                Modal.alert('提示!', '是否删除该聊天?', [
                    { text: '取消', onPress: () => console.log('cancel')},
                    { 
                        text: '确定',
                        onPress: () =>
                            new Promise((resolve) => { 
                                Toast.info('onPress Promise', 1);
                                setTimeout(resolve, 1000);
                            }),
                    },
                ])
            }, 1000)
        }
        onTouchMove(e){ 
            isTouchmoveing = true
            if(!timers) return   // 节流操作
    
            // 长按下一移动就取消长按效果
            clearTimeout(timers)
            timers = null
        }
        onTouchEnd = (e) => { 
            if (touchType === 'shortTouch' && !isTouchmoveing) { 
                console.log('我是单点击')
                // this.props.history.push(toUrl)
            } else if(touchType === 'longTouch') { 
                console.log('我是长按')
            }
    
    
            e.preventDefault();
            clearTimeout(timers)
            // 复原初始化数据
            timers = null
            touchType = 'shortTouch'
            toUrl= ""
            isTouchmoveing = false
        }
    
        render() { 
            return (
                <div className='Item noSel'
                     onTouchStart={ (e) => this.onTouchStart(e,'/ChatInterface')}
                     onTouchMove={ (e)=>this.onTouchMove(e)}
                     onTouchEnd={ this.onTouchEnd}>
                    <div className='waterMask'/>
                    <div className='Item-left'>
                        <img className='Item-left-img' src={ testimg}/>
                        <div className='flex flex-col hei-inh just-spa-aro ml10'>
                            <p className='flex ali-cen'>吕非<span className='fo-gray fo-12 ml6'>杭州若以文化</span></p>
                            <p className='fo-gray'>[已读]你好你好！！！</p>
                        </div>
                    </div>
                    <div className='Item-right'>
                        <span className='fo-gray fo-12'>昨天</span>
                    </div>
                </div>
            );
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android Launcher 去除长按弹出壁纸弹窗

Android Launcher 去除长按弹出壁纸弹窗在 Android 设备中，Launcher 是用户与操作系统交互的主要界面。当用户长按 Launcher 上的应用图

系统管理员/ 2023年10月14日 23:26/ 0 赞/ 31 阅读

相关 Android自定义Launcher：禁用长按弹出壁纸弹窗

Android自定义Launcher：禁用长按弹出壁纸弹窗在Android设备上，Launcher（启动器）是用户与设备交互的界面，它负责显示应用程序、小部件和壁纸等内容。

傷城~/ 2023年10月14日 18:30/ 0 赞/ 59 阅读

相关 swing jbutton实现长按和点击事件

import javax.swing.; import java.awt.event.ActionEvent; import java.awt.even

以你之姓@/ 2023年10月09日 17:28/ 0 赞/ 42 阅读

相关 Android 只保留长按事件,屏蔽点击事件

mIvBtn.setOnLongClickListener(new View.OnLongClickListener() { @Over

绝地灬酷狼/ 2023年10月03日 23:25/ 0 赞/ 2 阅读

相关 JavaScript 自己手写实现一个弹窗

项目中有很多地方会使用到弹窗，现在咱们自己写一个有弹出效果的弹窗. html 部分一个按钮一个弹窗盒子一个蒙板层代码：

系统管理员/ 2023年02月22日 10:56/ 0 赞/ 18 阅读

相关 creator 长按事件

在creator中使用长按 / bw 长按事件 node: 只能是节点 call: 长按触发的事件

心已赠人/ 2023年01月03日 04:59/ 0 赞/ 257 阅读

相关 Android 在Fragment中的TextView长按弹出对话框（长按监听事件）

第一步，获取操作句柄 textview控件名称叫showhistory. 设置它可以滚动。 //获得操作句柄 outputdata=(TextView

今天药忘吃喽~/ 2022年12月19日 06:23/ 0 赞/ 223 阅读

相关 html 长按事件坐标,HTML5-长按事件

长按我 var timeOutEvent=0; $(function()\{ $("\touchArea").on(\{ touchstart: function(e)

深藏阁楼爱情的钟/ 2022年10月06日 10:58/ 0 赞/ 270 阅读

相关 react-native弹窗Alert

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

刺骨的言语ヽ痛彻心扉/ 2022年05月22日 10:06/ 0 赞/ 314 阅读

相关关于react 写长按弹窗和单点事件一个调用思路

前言我想做一个长按1s弹出一个拟态框然后又可以单点滑动又不想失效的事件以下是我的一个聊天列表 <div className='Item noS

本是古典何须时尚/ 2021年07月24日 23:30/ 0 赞/ 344 阅读