<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();
},
