由於很多專案中都會用到通訊錄，所有就封裝了一個通訊錄的元件，實現了可通過字母檢索，撥打電話功能。
效果展示
用的技術點是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>