由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。
效果展示
用的技术点是scroll-view中的scrollTo方法。
向组件中传值和监听子组件事件，具体使用可参考官方文档
数据格式
代码语言：javascript复制[{
"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"
}]
}]组件代码
代码语言：javascript复制<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>其他页面的引用
代码语言：javascript复制<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>
