使用better-scroll完成索引栏
Sonder
2023-02-28
22293字
56分钟
浏览 (1.5k)
<template>
<div class="votingList_content_block">
<ul
class="ul_englishLetter"
ref="ulRef"
>
<li
class="ul_englishLetter_li"
@click="handleLetter(item)"
:class="{ activeLetter: item === activeLetter }"
ref="liRef"
v-for="item in config.englishLetter"
:key="item"
>
{{ item }}
</li>
</ul>
<div class="scroll_block">
<div ref="wrapper" class="votingList_content_scroll">
<div class="scroll_div" ref="voteItem">
<div class="votingList_period" ref="voteList">
<div class="voteCourItem" :key="item.id" v-for="item in config.allVoteList">{{item.doctor_name}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
data(){
return {
activeLetter: "",
scroll: null,
itemHeights: [],
localSearch: {
activeType: false,
content: "",
},
config: {
allVoteList: [
{
"id": 879,
"doctor_name": "鲍亮",
"doctor_letter": "B",
},
{
"id": 964,
"doctor_name": "蔡凌旸",
"doctor_letter": "C",
},
{
"id": 974,
"doctor_name": "蔡迎玖",
"doctor_letter": "C",
},
{
"id": 892,
"doctor_name": "蔡志明",
"doctor_letter": "C",
},
{
"id": 997,
"doctor_name": "曹秉基",
"doctor_letter": "C",
},
{
"id": 849,
"doctor_name": "陈鸿才",
"doctor_letter": "C",
},
{
"id": 1017,
"doctor_name": "陈佳",
"doctor_letter": "C",
},
{
"id": 955,
"doctor_name": "陈建",
"doctor_letter": "C",
},
{
"id": 968,
"doctor_name": "陈界",
"doctor_letter": "C",
},
{
"id": 909,
"doctor_name": "陈可绪",
"doctor_letter": "C",
},
{
"id": 1002,
"doctor_name": "陈林",
"doctor_letter": "C",
},
{
"id": 985,
"doctor_name": "陈玮",
"doctor_letter": "C",
},
{
"id": 911,
"doctor_name": "陈晓东",
"doctor_letter": "C",
},
{
"id": 917,
"doctor_name": "陈颖",
"doctor_letter": "C",
},
{
"id": 898,
"doctor_name": "陈勇",
"doctor_letter": "C",
},
{
"id": 893,
"doctor_name": "陈志坚",
"doctor_letter": "C",
},
{
"id": 1038,
"doctor_name": "邓垒",
"doctor_letter": "D",
},
{
"id": 969,
"doctor_name": "刁文琦",
"doctor_letter": "D",
},
{
"id": 986,
"doctor_name": "丁清清",
"doctor_letter": "D",
},
{
"id": 928,
"doctor_name": "丁燕",
"doctor_letter": "D",
},
{
"id": 972,
"doctor_name": "段春霞",
"doctor_letter": "D",
},
{
"id": 934,
"doctor_name": "冯晨露",
"doctor_letter": "F",
},
{
"id": 916,
"doctor_name": "冯家华",
"doctor_letter": "F",
},
{
"id": 1013,
"doctor_name": "冯劼妮",
"doctor_letter": "F",
},
{
"id": 908,
"doctor_name": "冯苗芳",
"doctor_letter": "F",
},
{
"id": 902,
"doctor_name": "冯学刚",
"doctor_letter": "F",
},
{
"id": 891,
"doctor_name": "傅强",
"doctor_letter": "F",
},
{
"id": 998,
"doctor_name": "高惠冰",
"doctor_letter": "G",
},
{
"id": 965,
"doctor_name": "高世华",
"doctor_letter": "G",
},
{
"id": 1035,
"doctor_name": "高毅哲",
"doctor_letter": "G",
},
{
"id": 1018,
"doctor_name": "高云",
"doctor_letter": "G",
},
{
"id": 853,
"doctor_name": "葛俊",
"doctor_letter": "G",
},
{
"id": 854,
"doctor_name": "郭翠艳",
"doctor_letter": "G",
},
{
"id": 1037,
"doctor_name": "郭小奇",
"doctor_letter": "G",
},
{
"id": 877,
"doctor_name": "郭旭利",
"doctor_letter": "G",
},
{
"id": 973,
"doctor_name": "郭毅峻",
"doctor_letter": "G",
},
{
"id": 875,
"doctor_name": "郭银红",
"doctor_letter": "G",
},
{
"id": 1031,
"doctor_name": "韩晶",
"doctor_letter": "H",
},
{
"id": 869,
"doctor_name": "贺靳贤",
"doctor_letter": "H",
},
{
"id": 943,
"doctor_name": "洪翔婵",
"doctor_letter": "H",
},
{
"id": 961,
"doctor_name": "黄阿敏",
"doctor_letter": "H",
},
{
"id": 906,
"doctor_name": "黄芳",
"doctor_letter": "H",
},
{
"id": 936,
"doctor_name": "黄娜",
"doctor_letter": "H",
},
{
"id": 889,
"doctor_name": "黄晓洁",
"doctor_letter": "H",
},
{
"id": 880,
"doctor_name": "华影",
"doctor_letter": "H",
},
{
"id": 904,
"doctor_name": "胡建新",
"doctor_letter": "H",
},
{
"id": 873,
"doctor_name": "胡静",
"doctor_letter": "H",
},
{
"id": 921,
"doctor_name": "霍彬",
"doctor_letter": "H",
},
{
"id": 975,
"doctor_name": "胡耶基",
"doctor_letter": "H",
},
{
"id": 933,
"doctor_name": "胡越",
"doctor_letter": "H",
},
{
"id": 867,
"doctor_name": "蒋力扬",
"doctor_letter": "J",
},
{
"id": 952,
"doctor_name": "嵇桂娟",
"doctor_letter": "J",
},
{
"id": 840,
"doctor_name": "荆丽",
"doctor_letter": "J",
},
{
"id": 957,
"doctor_name": "赖庆文",
"doctor_letter": "L",
},
{
"id": 915,
"doctor_name": "梁红光",
"doctor_letter": "L",
},
{
"id": 866,
"doctor_name": "梁璐",
"doctor_letter": "L",
},
{
"id": 919,
"doctor_name": "李本珊",
"doctor_letter": "L",
},
{
"id": 888,
"doctor_name": "李桂圆",
"doctor_letter": "L",
},
{
"id": 1004,
"doctor_name": "李丽娜",
"doctor_letter": "L",
},
{
"id": 938,
"doctor_name": "林浩",
"doctor_letter": "L",
},
{
"id": 901,
"doctor_name": "林艺娜",
"doctor_letter": "L",
},
{
"id": 896,
"doctor_name": "柳斌",
"doctor_letter": "L",
},
{
"id": 855,
"doctor_name": "刘宏杰",
"doctor_letter": "L",
},
{
"id": 878,
"doctor_name": "刘俊",
"doctor_letter": "L",
},
{
"id": 953,
"doctor_name": "刘璐璐",
"doctor_letter": "L",
},
{
"id": 966,
"doctor_name": "刘美娟",
"doctor_letter": "L",
},
{
"id": 844,
"doctor_name": "刘颖",
"doctor_letter": "L",
},
{
"id": 907,
"doctor_name": "刘振",
"doctor_letter": "L",
},
{
"id": 978,
"doctor_name": "李文宇",
"doctor_letter": "L",
},
{
"id": 900,
"doctor_name": "李植锋",
"doctor_letter": "L",
},
{
"id": 960,
"doctor_name": "卢喜",
"doctor_letter": "L",
},
{
"id": 945,
"doctor_name": "吕嘉林",
"doctor_letter": "L",
},
{
"id": 885,
"doctor_name": "吕维泽",
"doctor_letter": "L",
},
{
"id": 1023,
"doctor_name": "吕秀",
"doctor_letter": "L",
},
{
"id": 1015,
"doctor_name": "吕玉宝",
"doctor_letter": "L",
},
{
"id": 990,
"doctor_name": "马敏婷",
"doctor_letter": "M",
},
{
"id": 944,
"doctor_name": "毛圆",
"doctor_letter": "M",
},
{
"id": 940,
"doctor_name": "聂广杰",
"doctor_letter": "N",
},
{
"id": 956,
"doctor_name": "倪文涛",
"doctor_letter": "N",
},
{
"id": 1008,
"doctor_name": "彭孟岐",
"doctor_letter": "P",
},
{
"id": 992,
"doctor_name": "彭忠忠",
"doctor_letter": "P",
},
{
"id": 912,
"doctor_name": "齐路霞",
"doctor_letter": "Q",
},
{
"id": 874,
"doctor_name": "邱福铭",
"doctor_letter": "Q",
},
{
"id": 941,
"doctor_name": "邵川",
"doctor_letter": "S",
},
{
"id": 1020,
"doctor_name": "盛方军",
"doctor_letter": "S",
},
{
"id": 905,
"doctor_name": "沈岚",
"doctor_letter": "S",
},
{
"id": 976,
"doctor_name": "沈乐",
"doctor_letter": "S",
},
{
"id": 935,
"doctor_name": "石兴源",
"doctor_letter": "S",
},
{
"id": 954,
"doctor_name": "宋卉",
"doctor_letter": "S",
},
{
"id": 1022,
"doctor_name": "孙标峰",
"doctor_letter": "S",
},
{
"id": 884,
"doctor_name": "孙畋",
"doctor_letter": "S",
},
{
"id": 1007,
"doctor_name": "苏奕亮",
"doctor_letter": "S",
},
{
"id": 942,
"doctor_name": "仝梦婷",
"doctor_letter": "T",
},
{
"id": 1042,
"doctor_name": "王金焕",
"doctor_letter": "W",
},
{
"id": 983,
"doctor_name": "王鑫",
"doctor_letter": "W",
},
{
"id": 967,
"doctor_name": "王媛",
"doctor_letter": "W",
},
{
"id": 980,
"doctor_name": "温芝华",
"doctor_letter": "W",
},
{
"id": 991,
"doctor_name": "吴昂",
"doctor_letter": "W",
},
{
"id": 937,
"doctor_name": "吴熙",
"doctor_letter": "W",
},
{
"id": 897,
"doctor_name": "肖爱梅",
"doctor_letter": "X",
},
{
"id": 1036,
"doctor_name": "肖法嫚",
"doctor_letter": "X",
},
{
"id": 848,
"doctor_name": "夏小龙",
"doctor_letter": "X",
},
{
"id": 920,
"doctor_name": "谢士樑",
"doctor_letter": "X",
},
{
"id": 948,
"doctor_name": "谢晓平",
"doctor_letter": "X",
},
{
"id": 903,
"doctor_name": "谢展鸿",
"doctor_letter": "X",
},
{
"id": 924,
"doctor_name": "薛鸿浩",
"doctor_letter": "X",
},
{
"id": 1014,
"doctor_name": "徐华",
"doctor_letter": "X",
},
{
"id": 996,
"doctor_name": "许强周",
"doctor_letter": "X",
},
{
"id": 861,
"doctor_name": "徐炜",
"doctor_letter": "X",
},
{
"id": 881,
"doctor_name": "徐镶怀",
"doctor_letter": "X",
},
{
"id": 971,
"doctor_name": "徐旋里",
"doctor_letter": "X",
},
{
"id": 981,
"doctor_name": "杨逸坤",
"doctor_letter": "Y",
},
{
"id": 939,
"doctor_name": "杨志勇",
"doctor_letter": "Y",
},
{
"id": 984,
"doctor_name": "杨忠民",
"doctor_letter": "Y",
},
{
"id": 847,
"doctor_name": "闫宁宁",
"doctor_letter": "Y",
},
{
"id": 1028,
"doctor_name": "余海清",
"doctor_letter": "Y",
},
{
"id": 987,
"doctor_name": "余敏",
"doctor_letter": "Y",
},
{
"id": 1009,
"doctor_name": "于士昌",
"doctor_letter": "Y",
},
{
"id": 929,
"doctor_name": "张宝昕",
"doctor_letter": "Z",
},
{
"id": 982,
"doctor_name": "张弛",
"doctor_letter": "Z",
},
{
"id": 1034,
"doctor_name": "张航瑜",
"doctor_letter": "Z",
},
{
"id": 1026,
"doctor_name": "张慧",
"doctor_letter": "Z",
},
{
"id": 876,
"doctor_name": "张露",
"doctor_letter": "Z",
},
{
"id": 988,
"doctor_name": "张梅玲",
"doctor_letter": "Z",
},
{
"id": 918,
"doctor_name": "张秀萍",
"doctor_letter": "Z",
},
{
"id": 1030,
"doctor_name": "张亚雷",
"doctor_letter": "Z",
},
{
"id": 979,
"doctor_name": "张燕慧",
"doctor_letter": "Z",
},
{
"id": 872,
"doctor_name": "张颖一",
"doctor_letter": "Z",
},
{
"id": 959,
"doctor_name": "张盈盈",
"doctor_letter": "Z",
},
{
"id": 1033,
"doctor_name": "张永祥",
"doctor_letter": "Z",
},
{
"id": 865,
"doctor_name": "张珠华",
"doctor_letter": "Z",
},
{
"id": 963,
"doctor_name": "郑吉",
"doctor_letter": "Z",
},
{
"id": 951,
"doctor_name": "钟献",
"doctor_letter": "Z",
},
{
"id": 899,
"doctor_name": "周洁白",
"doctor_letter": "Z",
},
{
"id": 962,
"doctor_name": "周小芸",
"doctor_letter": "Z",
},
{
"id": 927,
"doctor_name": "周欣",
"doctor_letter": "Z",
},
{
"id": 999,
"doctor_name": "周欣亮",
"doctor_letter": "Z",
},
{
"id": 949,
"doctor_name": "周源",
"doctor_letter": "Z",
},
{
"id": 1016,
"doctor_name": "朱浩图",
"doctor_letter": "Z",
},
{
"id": 894,
"doctor_name": "朱鹏",
"doctor_letter": "Z",
},
{
"id": 947,
"doctor_name": "朱挺",
"doctor_letter": "Z",
},
{
"id": 1029,
"doctor_name": "朱旭东",
"doctor_letter": "Z",
},
{
"id": 977,
"doctor_name": "朱震威",
"doctor_letter": "Z",
},
{
"id": 989,
"doctor_name": "邹立",
"doctor_letter": "Z",
}
],
englishLetter: [
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
],
}
}
},
created() {
this.handleVoteMethodName()
},
methods: {
handleLetter(item){
this.activeLetter = item;
let indexLetter = this.getDataList().findIndex(
(val) => val.doctor_letter === item
);
if (!this.$refs.voteList) return;
let childrens = this.$refs.voteList.children;
let itemHeight = [...childrens].map((item) => item.clientHeight)[0];
let top = indexLetter === -1 ? top : -itemHeight * indexLetter;
this.scroll.scrollTo(0, top);
},
initScroll() {
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {
click: true,
probeType: 3,
mouseWheel: true,
scrollbar: {
fade: false,
interactive: false, // 1.8.0 新增
},
});
this.scroll.on("scroll", (pos) => {
this.dealWithScroll(pos);
});
} else {
this.scroll.refresh();
this.scroll.scrollTo(0, 0);
}
});
},
dealWithScroll(pos) {
if (this.itemHeights.length === 0) return;
let count = 0;
let currentIndex = 0;
let index = 0;
while (index < this.itemHeights.length) {
count += this.itemHeights[index];
if (count > Math.abs(pos.y)) {
currentIndex = index;
break;
}
index++;
}
let list = this.getDataList();
if (list.length === 0) return;
this.activeLetter = list[currentIndex].doctor_letter;
},
getItemHeight() {
this.$nextTick(() => {
if (!this.$refs.voteList) return;
let childrens = this.$refs.voteList.children;
this.itemHeights = [...childrens].map((item) => item.clientHeight);
});
},
getDataList() {
return this.config.allVoteList.filter((item) =>
item.doctor_name.includes(this.localSearch.content)
);
},
handleVoteMethodName(){
this.$nextTick(() => {
this.initScroll();
this.getItemHeight();
});
},
}
}
</script>
<style scoped>
.votingList_content_block {
display: flex;
overflow: hidden;
position: relative;
height: 100%;
}
.votingList_content_block .ul_englishLetter {
height: 74%;
width: 3vw;
flex: none;
padding: 0 4vw 0 5.33vw;
margin-top: 3.67vw;
position: absolute;
list-style: none;
z-index: 1;
}
.scroll_block,.votingList_content_scroll {
width: 100%;
height: 100%;
overflow: hidden;
}
.votingList_content_block .scroll_block {
flex: 1;
}
.voteCourItem {
height: 16vw;
line-height: 16vw;
text-align: center;
width: 100%;
background: #f2f2f3;
}
.voteCourItem:nth-child(even){
background-image: linear-gradient(90deg,#eadce4,#f2f2f3);
}
.ul_englishLetter_li {
text-align: center;
line-height: 5vw;
font-size: 2.13vw;
}
.ul_englishLetter_li.activeLetter {
font-weight: bold;
font-size: 3.6vw;
color: #911C61;
}
</style>或者使用vant里面的索引栏