当前位置：首页 > news >正文

实现A-Z滑动检索菜单

news 2025/7/26 8:02:53

写个这小玩意真麻烦
在这里插入图片描述

<template><div id="letterPeo"><!--    <button @click="getasd">获取</button>--><div class="letter"><div v-for="(item, index) in letter" :key="index" class="mb-2 item" :class="{active:selectItem == item }" @click="scrollOn(item, index)">{{ item }}</div></div><div class="peoBox" ref="scrollContainer"><div v-for="(item, index) in peoArray" :key="index" @click="onSelect(item, index)"><p class="peoKey" :id="'peo' + item.key">{{ item.key }}</p><p class="peolist" v-for="(ele, e) in item.list" :key="e">{{ ele.name }}</p></div></div></div>
</template><script>
export default {data() {return {selectItem: "A",letter: [],peoArray: [{key: "A", list: [{name: "安吉"}, {name: "安吉"}]},{key: "B", list: [{name: "bar饿啊额日"}, {name: "芭比"}]},{key: "C", list: [{name: "啛啛喳喳"}, {name: "吃炒菜"}]},{key: "D", list: [{name: "滴滴滴"}]},{key: "E", list: [{name: "鹅鹅鹅"}]},{key: "F", list: [{name: "方慧"}]},{key: "G", list: [{name: "哥哥"}]},{key: "H", list: [{name: "话说"}]},{key: "I", list: [{name: "ID额我热饭v"}]},{key: "J", list: [{name: "接化发"}]},{key: "K", list: [{name: "KFC"}]},{key: "L", list: [{name: "吕布"}]},{key: "M", list: [{name: "没读书"}]},{key: "N", list: [{name: "牛头人"}]},{key: "O", list: [{name: "O泡果奶"}]},{key: "P", list: [{name: "判断得我"}]},{key: "Q", list: [{name: "秦三儿"}]},{key: "R", list: [{name: "如果更方便"}]},{key: "S", list: [{name: "塞班"}]},{key: "T", list: [{name: "糖糖"}]},{key: "U", list: [{name: "U哈哈哈哈"}]},{key: "V", list: [{name: "V ME 50"}]},{key: "W", list: [{name: "王富贵"}]},{key: "X", list: [{name: "喜羊羊"}]},{key: "Y", list: [{name: "阳顶天"}]},{key: "Z", list: [{name: "自发热"}]}]};},computed: {},mounted() {this.letter = Array.from({length: 26}, (_, i) => String.fromCharCode(65 + i));this.$refs.scrollContainer.addEventListener('scroll', this.debounce(this.handleScroll, 200));},methods: {handleScroll(event) {const container = document.querySelector('#letterPeo');const closestElement = this.getClosestElementToTop(container);this.selectItem = closestElement;},debounce(func, wait) {let timeout;return function (...args) {const later = () => {clearTimeout(timeout);func.apply(this, args);};clearTimeout(timeout);timeout = setTimeout(later, wait);};},getasd() {const container = document.querySelector('#letterPeo');const closestElement = this.getClosestElementToTop(container);this.selectItem = closestElement;},getClosestElementToTop(container) {const elements = document.querySelectorAll(".peoKey");// console.log("container.getBoundingClientRect().top", container.getBoundingClientRect().top);let closestElement = null;let closestDistance = Infinity;for (let element of elements) {const rect = element.getBoundingClientRect();const distance = Math.abs(rect.top - container.getBoundingClientRect().top);// console.log("rect.top", rect.top, distance, distance < closestDistance);if (distance < closestDistance) {closestDistance = distance;closestElement = element;}}return closestElement.innerText;},scrollOn(item) {this.selectItem = item;let target = document.getElementById("peo" + item);if (target) {target.scrollIntoView({behavior: "smooth" /*auto*/});}},// 点击通讯录onSelect(item, index) {console.log(item, index);}},beforeDestroy() {this.$refs.scrollContainer.removeEventListener('scroll', this.debounce(this.handleScroll, 200));},
};
</script><style lang="scss" scoped>
#letterPeo {width: 800px;height: 500px;display: flex;justify-content: space-between;overflow-y: auto;background: #fff;.letter {font-size: 12px;margin-right: 20px;.item {padding: 1px;cursor: pointer;&.active {background: pink;}}}.peoBox {height: 100%;overflow-y: auto;flex: 1;width: 100%;padding: 0 10px;.peoKey {margin: 10px 0;font-size: 12px;background-color: #f3efef;}.peolist {margin: 20px 0;}}
}
</style>