vueでタッチイベントを使用する方法

なぜtouchイベントを使ったのか
プロジェクトではmint-uiでドロップダウンリフレッシュ機能を作りました.他の携帯電話でもいいですが、iphonexで仮想キーの位置にドロップダウンすると、ドロップダウンボックスが詰まって弾けません.そこで,ユーザが仮想キーにドロップダウンしないようにドロップダウン高さとバウンドの最大距離を設定し,touchイベントを用いた.
touchイベント
最も基本的なtouchイベントは4つあります.

touchstart

画面で指を押すとトリガーされます

touchmove

画面上で指を動かすとトリガーされます

touchend

画面上で指を持ち上げるとトリガーされます

touchcancel

電話アクセスやポップアップ情報など、より高いレベルのイベントが発生すると、現在のtouch操作がキャンセルされ、touchcancelがトリガーされます.一般的にtouchcancelではゲームやアーカイブなどの操作を一時停止します
それらのトリガ順序はtouchstart－>touchmove－>touchendtouch1個生成可能TouchEvent対象.
注意:多くの場合、タッチイベントとマウスイベントが同時にトリガーされます(タッチデバイスに最適化されていないコードがタッチデバイス上で正常に動作することを目的とします).タッチイベントを使用している場合は、event.preventDefault()マウスイベントがトリガーされるのを阻止するために呼び出すことができます.△プルダウン中にクリックイベントがトリガーされた可能性があると思いますので、ドロップダウンは弾けません.
Vueでtouchイベントをリスニングする方法

	/**
	 * [TouchMove   touch  ]
	 */
	 TouchMove () {
	   this.$refs.idealist.addEventListener('touchmove', this.handleTouchMove, false)
	   this.$refs.idealist.addEventListener('touchstart', this.handleTouchStart, false)
	   this.$refs.idealist.addEventListener('touchend', this.handleTouchtouchend, false)
	 }

mountedで呼び出すthis.TouchMove().そしてmethodsに、あなたが事件を傍受したい方法を書きます.ここで応用しましたtouchmoveとtouchstart.

	/**
     * [handleTouchStart   Touch   Y   ]
     */
    handleTouchStart (event) {
      this.startY = event.touches[0].clientY
    },
    /**
     * [handleTouchMove   touchmove Y    ]
     */
    handleTouchMove (event) {
      if (event.touches[0].clientY - this.startY > 300) {
        this.lodTopBool = true
        this.$refs.loadmoretwo.onTopLoaded()
        this.allLoaded = false
        this.page = 1
        this.pageSize = 20
        setTimeout(() => {
          this.lodTopBool = false
        }, 300)
        this.loadTopList()
      }
    }

clientX:ビューポート内のx座標をタッチします.

clientY:ビューポート内のy座標をタッチします.

identifier:タッチを識別する一意のID.

pageX:ページ内のx座標をタッチします.

pageY:ページ内のy座標をタッチします.

screenX:画面内のx座標をタッチします.

screenY:画面にあるy座標をタッチします.

target:コンタクトのDOMノードターゲット.これにより,vueでtouchイベントを傍受し,一定距離を超えたドロップダウンリフレッシュ自動リバウンドリフレッシュ機能を実現した.