vue better-scrollによる通信録式リストスクロールと左右連動効果(1)

1.右側のアルファベットをクリックして、該当するリスト位置までスクロールする
まず右側のアルファベットリストでtouchstartイベントをリスニングし、イベントが発生すると対応する関数を実行します.
関数の内容

onShortCutTouchStart (e) {
      let anchorIndex = getData(e.target, 'index')
      this.touch.anchorIndex = anchorIndex
      this.$refs.listview.scrollToElement(this.$refs.listgroup[anthorindex], 0)
    },

export function getData (el, name, val) {
  const prefix = 'data-'
  name = prefix + name
  if (val) {
    return el.setAttribute(name, val)
  } else {
    return el.getAttribute(name)
  }
}

(1)リストはv-forループレンダリングで得られるので,data-index="index"で属性をバインドし,getAttribute法で各リストのindexを取得する.eはイベントオブジェクトであり、e.targetはオブジェクトの各itemである
(2)クリック時のindexを取得すると,これをbetter-scroll内のscrollToElementメソッドを用いてスクロールすることができる.取得したばかりのindexにターゲット要素を入力すると、スクロールが実現されます.0はスクロール時間です.this.$refs.Listgroup[anthorindex]は、スクロールするターゲット要素です.

 this.$refs.listview.scrollToElement(this.$refs.listgroup[anthorindex], 0)

2.右側のアルファベットリストをスライドさせると、左側のリストもリアルタイムで対応する位置にスクロールされます.

onShortCutTouchStart (e) {
      let anchorIndex = getData(e.target, 'index')
      let firstTouch = e.touches[0]
      this.touch.y1 = firstTouch.pageY
      this.touch.anchorIndex = anchorIndex
      this._scrollTo(anchorIndex)
    },
onShortCutTouchMove (e) {
      let firstTouch = e.touches[0]
      this.touch.y2 = firstTouch.pageY
      let delta = (this.touch.y2 - this.touch.y1) / ANTHOR_HEIGHT | 0
      let anthorIndex = parseInt(this.touch.anchorIndex) + delta
      this._scrollTo(anthorIndex)
    },
 _scrollTo (index) {
      this.$refs.listview.scrollToElement(this.$refs.listgroup[index], 0)
    }

1の

 this.$refs.listview.scrollToElement(this.$refs.listgroup[anthorindex], 0)

抽象的に1つの方法になって、呼び出しやすくて、コードを書く時間を節約します.
(1)最初にタッチしたときのpageYとindexを取得する
(2)タッチ後のスライド毎のpageYを取得する
(3)両pageYを減算することでスライド距離がわかる
(4)スライドの距離をアルファベットごとのリストの高さで割って、何文字スライドしたかを得る
(5)次に最初にタッチして取得したindexにスライドアルファベットの個数を加えることで,どのアルファベットに滑ったかを算出することができる.
(6)最後にsrcollを呼び出すsrcollToElementメソッドは対応する要素にスライドする.
(7)スライドイベントは、最初のタッチイベントで得られたindexとpageYを用いる必要があるため、creadedライフフックにthisを設定する.touch={}空のオブジェクト、取得したindexとpageYを格納します.
tips:
(1)

let delta = (this.touch.y2 - this.touch.y1) / ANTHOR_HEIGHT | 0

この文の後ろの0は下に整頓するという意味で、Mathも使えます.floorメソッド.
(2)
touchmoveイベントをバインドすると、バブルを阻止します.そうしないと、scrollイベントもトリガーされます.つまり、右側のリストをスライドすると、左側のリストもスライドします.
泡立ち止め用@touchmove.stop.prevent
(3)
srcのprobeTypeプロパティを3に設定しないと移動に問題があります