小程序的双击事件（适用uniapp,Taro）

前言

小程序中不提供双击事件，即我们需要自己写逻辑解决 其实也没啥难点， 主要是记录及分享，有需要的朋友可以参考 使用的技术栈是Taro+react,逻辑上都一样适用

 <Text
    onClick={this.selectTab.bind(this, index, item)}
    className={this.state.tabIndex === index ? 'tab-item active' : 'tab-item'}
    key={String(index)}
  >
    {item}
  </Text>
  selectTab(val, name, e) {
    // console.log('单机', e);
    // 判断筛选是否值
    if (name) {
      this.setState({ isSelect: true });
    } else {
      this.setState({ isSelect: false });
    }
    this.setState({ tabIndex: val });
    this.getProduct(name);

    var curTime = e.timeStamp;
    var lastTime = this.state.lastTime;

    console.log('上一次点击时间：' + lastTime);
    console.log('这一次点击时间：' + curTime);
    console.log('------------------------------');
    var interval = curTime - lastTime;
    if (interval && interval < 350) {
      console.log('挺快的双击，用了：' + (curTime - lastTime));
      this.setState({
        isSelect: false,
        tabIndex: '',
      });
      this.getProduct('');
    }
    this.setState({
      lastTime: curTime,
    });
  }

Taro方案

另外Taro自家也提供技术方案，搜双击就可看到，大家可以参考下

function EditableText ({ title }) {
  const [ lastClickTime, setClickTime ] = useState(0)
  const [ editing, setEditing ] = useState(false)

  return (
    <View>
      {
        editing
          ? <TextInput editing={editing} />
          : <Text
            onClick={e => {
              const currentTime = e.timeStamp
              const gap = currentTime - lastClickTime
              if (gap > 0 && gap < 300) { // double click
                setEditing(true)
              }
              setClickTime(currentTime)
            }}
          >
            {title}
          </Text>
      }
    </View>
  )
}

结束语

希望大家一键三连多多支持，谢谢～