索引栏

<section class="sc-index-bar">

      <div

        class="sc-index-bar-buttons"

        ref="bar"

        @touchstart.prevent.stop="touchstartIndexbar"

        @touchmove.prevent.stop="touchmoveIndexbar"

        @touchend.prevent.stop="touchendIndexbar">

        <span

          class="sc-index-bar-button"

          v-for="(item,k) in orgDetail"

          :key="k">

          <iconwarnsvg

            :color="storeStyle?'#b1b3ba':'#333'"

            v-if="!item.orgFirstPinYin" />

          {{ item.orgFirstPinYin }}

        </span>

      </div>

      <!-- 索引栏提示框 -->

      <transition name="fade">

        <div

          :class="['sc-index-bar-toast',{'white':!storeStyle}]"

          v-show="indexbarToast.show">

          <span>{{ indexbarToast.label }}</span>

          <iconwarnsvg

            :color="storeStyle?'#b1b3ba':'#333'"

            v-if="!indexbarToast.label" />

        </div>

      </transition>

    </section>

  </section>

 

 /**

       * 开始触摸索引栏

       * @param {TouchEvent} e touch事件实例

       */

      touchstartIndexbar(e) {

        // 记录第一次触摸的y轴坐标

        this.firstClickY = e.touches[0].clientY;

        // 记录第一次触摸的下标

        this.orgDetail.forEach((item, i) => {

          if (item.orgFirstPinYin === e.target.innerText) this.startIndexbar = i;

        });

        // 索引栏提示框

        this.indexbarToast = {

          show: true,

          label: e.target.innerText,

          index: this.startIndexbar,

        };

        this.scroll(this.startIndexbar);

      },

 

/** 列表滚动 */

      scroll(i) {

//水滴：展示移动到哪个字母

        const elIcon = document.querySelector('.sc-index-bar-toast');

        const { height, top } = document.querySelectorAll('.sc-index-bar-button')[i].getBoundingClientRect();

        const { height: iconHeight } = elIcon.getBoundingClientRect();

        elIcon.style.top = `${top + height / 2 - iconHeight / 2}px`;

// 相对应的列表元素置顶

        document.querySelectorAll('.sc-scroller-module')[i].scrollIntoView();

      },