Question

有一个反应传单地图，此时禁用一根手指拖动地图。

我希望在向任何方向滑动地图时显示使用两根手指移动地图的消息。

有人可以帮我解决这个问题吗？

Answer 1

我过去常常统计用户在触摸时使用的手指数，如果是一根手指，那么我将状态设置为显示信息以使用两只手指

    /**
     * Change state to show drag info to user and after some time hides the same message.
     */
    showDragInfoMessage = () => {
        if (!this.state.showOneFingerDragInfo) {
            this.setState({
                showOneFingerDragInfo: true
            });
        }
    };

    /**
     * Maps move handler.
     *
     * @param event
     */
    handleMapMove = (event) => {
        if (event.type === 'touchmove' && !this.state.disableOneFingerDragInfo) {
            let currentY = event.touches[0].clientY;
            let currentX = event.touches[0].clientX;

            if ((Math.abs(currentY - this.state.touchLastY) > 100 || Math.abs(currentX - this.state.touchLastX) > 100)) {
                if (event.touches.length < 2) {
                    this.showDragInfoMessage();
                } else {
                    if (this.state.showOneFingerDragInfo) {
                        event.preventDefault();
                        this.setState({
                            showOneFingerDragInfo: false
                        });
                    }
                }
            }
        }
    };

<div id={'overlay'} style={{display: this.state.showOneFingerDragInfo ? 'block' : 'none'}}>
    <span>Use two finger to move the map</span>
</div>

用一根手指触摸地图时，在移动设备上添加消息

1 个答案: