使用APICloud AVM框架封装通讯录组件

由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。

效果展示

用的技术点是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>

现在，APICloud 官方正在举办 AVM 组件的征集大赛，通过审核就能获得一定的奖金，大家感兴趣的也可以去围观一下。传送门：https://www.apicloud.com/acti...