這里我們直接使用scrollIntoView方法
該方法將調(diào)用它的元素滾動到瀏覽器窗口的可見區(qū)域
語法
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布爾參數(shù)
element.scrollIntoView（scrollIntoViewOptions）; //對象參數(shù)
組件
分析一下功能就知道很簡單了。
首先需要一個通訊錄列表，其次是字母列表。
字母列表很簡單。
第一種方法：直接用fromCharCode，for循環(huán)遍歷拿到26個英文字母。
// 獲取26個英文字母大寫
for (var i = 0; i < 26; i++) {
this.letter.push(String.fromCharCode(65 + i))
}
但是這樣的做法，有一個壞處就是，如果通訊錄沒有這么多呢？
換句話說，如果通訊錄只有ABCDEFG這幾個首字母的聯(lián)系人，你把26個都弄上去有點不太合適。
第二種方法：也是相對簡單的，直接從通訊錄列表拿到字母。當然，這種方法需要后端給你對應的數(shù)據(jù)結(jié)構(gòu)。并且得讓他給你按首字母排序好，畢竟能少一事少一事。什么？他不干？打一頓他就聽話了。
當然，我給出的數(shù)據(jù)結(jié)構(gòu)你可以參考：
const peoArray = [
{
key: "A",
list: [
{
name: "安吉",
},
{
name: "安吉",
},
],
},
{
key: "B",
list: [
{
name: "爸爸",
},
{
name: "芭比",
},
],
},
{
key: "C",
list: [
{
name: "蔡徐坤",
},
{
name: "蔡徐坤",
},
],
},
]
直接上代碼文章來源：http://www.zghlxwxcb.cn/news/detail-527630.html
<template>
<div id="letterPeo">
<!-- 導航欄 -->
<nav class="navBar" v-if="navBar" :style="{ height: navBarHeight }">頭部導航欄</nav>
<!-- 字母檢索 -->
<div class="letter">
<div v-for="(item, index) in letter" :key="index" @click="scrollOn(item, index)">
{{ item }}
</div>
</div>
<!-- 通訊錄列表 -->
<div class="peoBox">
<div class="peo" ref="box">
<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>
</div>
</template>
<script>
export default {
data() {
return {
navBar: true, //是否開啟頭部導航
navBarHeight: "50px", //導航欄高度
letter: [], //字母檢索列表
peoArray: [],//通訊錄列表
};
},
computed: {},
mounted() {
// 獲取26個英文字母大寫
// for (var i = 0; i < 26; i++) {
// this.letter.push(String.fromCharCode(65 + i))
// }
// 只獲取通訊錄字母
this.peoArray.forEach((ele) => {
this.letter.push(ele.key);
});
//因為有導航欄的原因，默認距離頂部一個導航欄的高度
if (this.navBar) this.$refs.box.style.marginTop = this.navBarHeight;
},
methods: {
// 字母檢索
scrollOn(item) {
if (this.navBar) this.$refs.box.style.marginTop = 0; // 開啟導航后，上邊距默認清零
let target = document.getElementById("peo" + item); //獲取每個字母通訊錄對象
if (target)
target.scrollIntoView({
behavior: "smooth", // 定義動畫過渡效果， "auto"或 "smooth" 之一。默認為 "auto"
});
if (this.navBar) this.$refs.box.style.marginTop = this.navBarHeight; //因為有導航欄的原因，所以上邊距應該為導航欄的高度
},
// 點擊通訊錄
onSelect(item, index) {
console.log(item, index);
},
},
};
</script>
<style scoped>
#letterPeo {
width: 100%;
}
/* 導航欄 */
.navBar {
width: 100%;
position: fixed;
text-align: center;
line-height: 50px;
background: #abf0ff;
z-index: 3;
}
/* 字母 */
.letter {
position: fixed;
right: 10px;
top: 15%;
z-index: 2;
}
/* 通訊錄 */
.peoBox {
position: relative;
}
.peo {
width: 100%;
overflow-y: scroll;
position: absolute;
}
.peo p{
padding: 0 10px;
}
.peo .peoKey {
margin: 10px 0;
font-size: 12px;
background-color: #f3efef;
}
.peolist {
margin: 20px 0;
}
</style>
完整數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-527630.html
[
{
key: "A",
list: [
{
name: "安吉",
},
{
name: "安吉",
},
],
},
{
key: "B",
list: [
{
name: "爸爸",
},
{
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: "ikun",
},
],
},
{
key: "J",
list: [
{
name: "接化發(fā)",
},
],
},
{
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: "趙一曼",
},
],
},
],
到了這里，關于封裝一個類似微信通訊錄帶有字母檢索功能的vue組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
