vue利用better-scroll实现通讯录式列表滚动和左右联动效果

---

前言

大家好，我是尤雨海。。。。。。。

效果演示

一、HTML部分。

<template>
  <div>
    <!--使用better-scroll的父容器  必须设置固定宽高-->
    <div class="wrapper" ref="wrapper">
      <div class="city">
        <ul v-for="(item, index) in cityList" :key="index" :ref="index">
          <p>{
   {
    index }}</p>
          <li v-for="(items, indexs) in item" :key="indexs">
            {
   {
    items.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 右侧字母列表 -->
    <ul class="letterList">
      <li
        v-for="(item, index) in letter"
        :key="index"
        @click="scrollToEle(item)"
        :class="{ active: item == isLetter }"
        @touchmove="handleMove"
        :ref="item"
      >
        {
   {
    item }}
      </li>
    </ul>
  </div>
</template>

二、css部分

<style lang="scss" scoped>
.wrapper {
   
  width: 100%;
  height: 100</