vue中使用swiper实现滑动和字母检索

<template>
  <div style="height: 100%;">
    <div class="search-div">
      <i class="search-icon"></i>
      <!--<input type="search" placeholder=""/>-->
      <input placeholder="" @input="handleInput"/>
    </div>
    <!--搜索结果-->
    <div class="search-result-div" v-if="hasResult">
      <ul>
        <li v-for="city in searchResultList" :id="city.id" @click="handleSelectCity(city)">{
  {city.name}}</li>
      </ul>
    </div>
    <div class="no-result" v-if="hasNoResult">抱歉，未找到你要搜索的内容</div>
    <div
      ref="cityContainer"
      class="swiper-container"
      style="height: calc(100% - 70px); overflow: hidden;"   // overflow：hidden避免滑动时溢出
      v-if="!hasResult && !hasNoResult"
    >
      <div
        ref="cityWrapper"
        class="swiper-wrapper"
      >
        <div class="cur-city-div block-list swiper-slide">
          <p>当前</p>
          <div class="grid">
            <div class="grid-cell">
              <p class="poi-text cur-city-text">
                {
  {curCityName}}
              </p>
            </div>
          </div>
        </div>
        <div class="pop-use-div block-list swiper-slide">
          <p>热点</p>
          <div class="grid">
            <div class="grid-cell" v-for="(item) in popCityList" @click="changeCity(item)">
              <p class="poi-text" :id="item.id">
                <!--<a class="loc-icon" :class="{'active':id == item.id}"></a>-->{
  {item.name}}</p>
            </div>
          </div>
        </div>
        <!--列表-->
        <div class="all-city-div block-list swiper-slide" v-for="cityList in allCityList" :id="cityList.id">
          <p class="city-list-anchor">{
  {cityList.name}}</p>
          <div class="city-block-div">
            <ul>
              <li v-for="city in cityList.data" @click="changeCity(city)">{
  {city.name}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="city-letter-div"
         @touchstart="touchStart"
         @touchmove="touchMove"
         @touchend="touchEnd"
         v-if="!hasResult && !hasNoResult"
    >
      <ul ref="cityLetterUl">
        <li v-for="letter in letterList">{
  {letter.name}}</li>
      </ul>
    </div>
    <div class="city-letter-select" v-if="letterClick">
      <p>{
  {letterName}}</p>
    </div>
  </div>
</template>

<script>

  import Swiper from 'swiper';

  export default {
    name: 'switchCity',
    components: {},
    data() {
      return {
        swiper: null,
        searchVal: '',
        letterClick: false,
        letterName: '',
        locCityName: '',
        hasResult: false,
        hasNoResult: false,
        startY: 0,           // 初始位置
        startIndex: 0,       // 初始的letterIndex
        disY: 0,