因为很多我的项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话性能。
成果展现
用的技术点是scroll-view中的scrollTo办法。
向组件中传值和监听子组件事件，具体应用可参考官网文档
数据格式
[{ "zkey": "A", "children": [{ "name": "安强", "phone": "11111111111", "zkey": "A" }]}, { "zkey": "B", "children": [{ "name": "边亮", "phone": "11111111111", "zkey": "B" }, { "name": "白菊", "phone": "11111111111", "zkey": "B" }, { "name": "贺之", "phone": "11111111111", "zkey": "B" }, { "name": "白梓", "phone": "11111111111", "zkey": "B" }, { "name": "卜军", "phone": "11111111111", "zkey": "B" }]}]组件代码
<template> <view> <scroll-view class="page" scroll-y show-scrollbar="false" id="book"> <safe-area></safe-area> <view class="item" v-for="(item, index) in list" v-show="item.children.length>0"> <view class="nav" id={item.zkey}> <text class="nav-title">{item.zkey}</text> </view> <view class="box" v-for="(it, pindex) in item.children" data-phone={it.phone} @click="takePhone"> <image class="avator" src='../../image/avator.png' mode="widthFix"></image> <view class="right"> <text class="name">{it.name}</text> </view> </view> </view> </scroll-view> <scroll-view class="right-nav" scroll-y show-scrollbar="false"> <view class="right-nav-item" data-id={item.zkey} @click="scrollToE" v-for="(item, index) in list"> <text class={item.zkey==zIndex?'right-nav-item-on':'right-nav-item-off'}>{item.zkey}</text> </view> </scroll-view> </view></template><script> export default { name: 'tell', installed(){ }, props:{ list: Array }, data() { return{ zIndex:'' } }, methods: { scrollToE(e){ var id = e.target.dataset.id; var book = document.getElementById('book'); book.scrollTo({ view:id }) this.data.zIndex = id; }, takePhone(e){ var phone = e.target.dataset.phone; this.fire('takeCall', phone); } } }</script><style> .page { height: 100%; background-color: #ffffff; } .nav{ margin: 0 10px; padding: 0 10px; } .nav-title{ font-size: 20px; } .box{ flex-flow: row nowrap; justify-content: flex-start; align-items: center; margin: 10px; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .right{ padding-left: 20px; } .bt{ flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .bt-position{ font-size: 14px; color: #666666; } .bt-part{ font-size: 14px; color: #666666; padding-left: 20px; } .right-nav{ position: absolute; right: 10px; width: 30px; padding: 30px 0; height: 100%; align-items: center; } .right-nav-item{ padding-bottom: 5px; } .right-nav-item-on{ color: #035dff; } .right-nav-item-off{ color: #666666; } .avator{ width: 30px; padding: 5px; }</style>其余页面的援用
<template> <view class="page"> <safe-area></safe-area> <tell v-bind:list="bookdata" ontakeCall="takeCall"></tell> </view></template><script> import '../../components/tell.stml' export default { name: 'tellbook', apiready(){//like created }, data() { return{ bookdata:[{"zkey":"A","children":[{"name":"安强","phone":"11111111111","zkey":"A"}]},{"zkey":"B","children":[{"name":"边玉亮","phone":"11111111111","zkey":"B"},{"name":"朱文菊","phone":"11111111111","zkey":"B"},{"name":"步贺之","phone":"11111111111","zkey":"B"},{"name":"白梓蓉","phone":"11111111111","zkey":"B"},{"name":"卜冰军","phone":"11111111111","zkey":"B"}]},{"zkey":"#","children":[{"name":"asd","phone":"11111111111","zkey":"#"},{"name":"3455","phone":"11111111111","zkey":"#"},{"name":"*3dd","phone":"11111111111","zkey":"#"},{"name":"tyuuu","phone":"11111111111","zkey":"#"}]}] } }, methods: { takeCall(e){ //console.log(JSON.stringify(e)); var phone = e.detail; api.call({ type: 'tel_prompt', number: phone }); } } }</script><style> .page { height: 100%; }</style>