AVM框架封装通讯录组件

wuliyuye

由于很多项目中都会用到通讯录，所有就封装了一个通讯录的组件，实现了可通过字母检索，拨打电话功能。
用的技术点是scroll-view中的scrollTo方法。
​​​
​
向组件中传值和监听子组件事件，具体使用请参考官方文档。
​
数据格式[{
        "zkey": "A",
        "children": [{
                "name": "安强",
                "phone": "18853889099",
                "zkey": "A"
        }]
}, {
        "zkey": "B",
        "children": [{
                "name": "边亮",
                "phone": "18853889099",
                "zkey": "B"
        }, {
                "name": "白菊",
                "phone": "18853889099",
                "zkey": "B"
        }, {
                "name": "贺之",
                "phone": "18853889099",
                "zkey": "B"
        }, {
                "name": "白梓",
                "phone": "18853889099",
                "zkey": "B"
        }, {
                "name": "卜军",
                "phone": "18853889099",
                "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"></tell>
    </view>
</template>
<script>
        import '../../components/tell.stml'
        export default {
                name: 'tellbook',
                apiready(){//like created

                },
                data() {
                        return{
                                bookdata:[{"zkey":"A","children":[{"name":"安强","phone":"18853889099","zkey":"A"}]},{"zkey":"B","children":[{"name":"边玉亮","phone":"18853889099","zkey":"B"},{"name":"白文菊","phone":"18853889099","zkey":"B"},{"name":"步贺之","phone":"18853889099","zkey":"B"},{"name":"白梓蓉","phone":"18853889099","zkey":"B"},{"name":"卜冰军","phone":"18853889099","zkey":"B"}]},{"zkey":"C","children":[{"name":"程建锋","phone":"18853889099","zkey":"C"},{"name":"陈利芳","phone":"18853889099","zkey":"C"},{"name":"陈俊杰","phone":"18853889099","zkey":"C"},{"name":"陈宇豪","phone":"18853889099","zkey":"C"},{"name":"蔡顺江","phone":"18853889099","zkey":"C"},{"name":"曹标","phone":"18853889099","zkey":"C"},{"name":"曹学庆","phone":"18853889099","zkey":"C"},{"name":"蔡相梅","phone":"18853889099","zkey":"C"},{"name":"曹曙成","phone":"18853889099","zkey":"C"},{"name":"车明忠","phone":"18853889099","zkey":"C"},{"name":"陈虎","phone":"18853889099","zkey":"C"},{"name":"陈毅","phone":"18853889099","zkey":"C"},{"name":"陈德","phone":"18853889099","zkey":"C"},{"name":"陈宣祥","phone":"18853889099","zkey":"C"}]},{"zkey":"D","children":[{"name":"翟方斌","phone":"18853889099","zkey":"D"},{"name":"翟建飞","phone":"18853889099","zkey":"D"},{"name":"杜红新","phone":"18853889099","zkey":"D"},{"name":"段晓宁","phone":"18853889099","zkey":"D"},{"name":"段飞鹏","phone":"18853889099","zkey":"D"},{"name":"丁一庭","phone":"18853889099","zkey":"D"},{"name":"邓臣冰","phone":"18853889099","zkey":"D"}]},{"zkey":"E","children":[]},{"zkey":"F","children":[{"name":"范德裕","phone":"18853889099","zkey":"F"},{"name":"樊鑫","phone":"18853889099","zkey":"F"}]},{"zkey":"G","children":[{"name":"郭枝萍","phone":"18853889099","zkey":"G"},{"name":"高亚楠","phone":"18853889099","zkey":"G"},{"name":"高云龙","phone":"18853889099","zkey":"G"},{"name":"郭建祥","phone":"18853889099","zkey":"G"},{"name":"郭洁","phone":"18853889099","zkey":"G"},{"name":"关福勋","phone":"18853889099","zkey":"G"},{"name":"关必武","phone":"18853889099","zkey":"G"},{"name":"高志明","phone":"18853889099","zkey":"G"},{"name":"耿明税","phone":"18853889099","zkey":"G"},{"name":"郭佳","phone":"18853889099","zkey":"G"},{"name":"郭凤兰","phone":"18853889099","zkey":"G"}]},{"zkey":"H","children":[{"name":"何雯","phone":"18853889099","zkey":"H"},{"name":"侯晓宇","phone":"18853889099","zkey":"H"},{"name":"韩美霞","phone":"18853889099","zkey":"H"},{"name":"胡兴隆","phone":"18853889099","zkey":"H"},{"name":"何芝晴","phone":"18853889099","zkey":"H"},{"name":"黄延明","phone":"18853889099","zkey":"H"}]},{"zkey":"I","children":[]},{"zkey":"J","children":[{"name":"江新花","phone":"18853889099","zkey":"J"},{"name":"姜亚如","phone":"18853889099","zkey":"J"},{"name":"焦岁刚","phone":"18853889099","zkey":"J"},{"name":"贾金鹏","phone":"18853889099","zkey":"J"},{"name":"焦海娟","phone":"18853889099","zkey":"J"},{"name":"靳峰","phone":"18853889099","zkey":"J"},{"name":"金军伟","phone":"18853889099","zkey":"J"},{"name":"焦海娟","phone":"18853889099","zkey":"J"},{"name":"解元英","phone":"18853889099","zkey":"J"},{"name":"蒋勇","phone":"18853889099","zkey":"J"}]},{"zkey":"K","children":[{"name":"孔锁燕","phone":"18853889099","zkey":"K"},{"name":"寇嘉男","phone":"18853889099","zkey":"K"},{"name":"柯倪红","phone":"18853889099","zkey":"K"}]},{"zkey":"L","children":[{"name":"李小康","phone":"18853889099","zkey":"L"},{"name":"刘彦","phone":"18853889099","zkey":"L"},{"name":"李春云","phone":"18853889099","zkey":"L"},{"name":"李志广","phone":"18853889099","zkey":"L"},{"name":"李威","phone":"18853889099","zkey":"L"},{"name":"刘飞平","phone":"18853889099","zkey":"L"},{"name":"李志宏","phone":"18853889099","zkey":"L"},{"name":"李海涛","phone":"18853889099","zkey":"L"},{"name":"刘强","phone":"18853889099","zkey":"L"},{"name":"罗海燕","phone":"18853889099","zkey":"L"},{"name":"刘智平","phone":"18853889099","zkey":"L"},{"name":"李雅丽","phone":"18853889099","zkey":"L"},{"name":"刘庆春","phone":"18853889099","zkey":"L"},{"name":"李金城","phone":"18853889099","zkey":"L"},{"name":"李华","phone":"18853889099","zkey":"L"},{"name":"李宏林","phone":"18853889099","zkey":"L"},{"name":"刘军","phone":"18853889099","zkey":"L"},{"name":"罗小春","phone":"18853889099","zkey":"L"},{"name":"刘文艺","phone":"18853889099","zkey":"L"},{"name":"刘祥","phone":"18853889099","zkey":"L"},{"name":"李泽诚","phone":"18853889099","zkey":"L"},{"name":"兰石峰","phone":"18853889099","zkey":"L"},{"name":"李瑞芳","phone":"18853889099","zkey":"L"},{"name":"刘亚琴","phone":"18853889099","zkey":"L"},{"name":"刘变林","phone":"18853889099","zkey":"L"},{"name":"李宇枫","phone":"18853889099","zkey":"L"},{"name":"刘增华","phone":"18853889099","zkey":"L"},{"name":"李耀晨","phone":"18853889099","zkey":"L"},{"name":"刘洋","phone":"18853889099","zkey":"L"},{"name":"李晓鹏","phone":"18853889099","zkey":"L"},{"name":"卢泳成","phone":"18853889099","zkey":"L"},{"name":"李兴荣","phone":"18853889099","zkey":"L"},{"name":"李德会","phone":"18853889099","zkey":"L"},{"name":"廉丽","phone":"18853889099","zkey":"L"},{"name":"李小英","phone":"18853889099","zkey":"L"},{"name":"雷连荣","phone":"18853889099","zkey":"L"},{"name":"路海荣","phone":"18853889099","zkey":"L"},{"name":"吕凯波","phone":"18853889099","zkey":"L"},{"name":"李怡纬","phone":"18853889099","zkey":"L"},{"name":"刘鸿雁","phone":"18853889099","zkey":"L"},{"name":"李兰兰","phone":"18853889099","zkey":"L"},{"name":"刘翠芹","phone":"18853889099","zkey":"L"},{"name":"李帅","phone":"18853889099","zkey":"L"},{"name":"李秋梅","phone":"18853889099","zkey":"L"},{"name":"吕贵利","phone":"18853889099","zkey":"L"},{"name":"李亮","phone":"18853889099","zkey":"L"},{"name":"李奇","phone":"18853889099","zkey":"L"},{"name":"刘孝宇","phone":"18853889099","zkey":"L"}]},{"zkey":"M","children":[{"name":"毛晓慧","phone":"18853889099","zkey":"M"},{"name":"明兴春","phone":"18853889099","zkey":"M"},{"name":"莫足敏","phone":"18853889099","zkey":"M"},{"name":"马树明","phone":"18853889099","zkey":"M"}]},{"zkey":"N","children":[{"name":"那玉华","phone":"18853889099","zkey":"N"}]},{"zkey":"O","children":[]},{"zkey":"P","children":[{"name":"庞天博","phone":"18853889099","zkey":"P"},{"name":"潘宁","phone":"18853889099","zkey":"P"},{"name":"皮丽花","phone":"18853889099","zkey":"P"}]},{"zkey":"Q","children":[{"name":"青长江","phone":"18853889099","zkey":"Q"},{"name":"秦宗琼","phone":"18853889099","zkey":"Q"}]},{"zkey":"R","children":[{"name":"任菊艳","phone":"18853889099","zkey":"R"},{"name":"任庆龙","phone":"18853889099","zkey":"R"},{"name":"任福虎","phone":"18853889099","zkey":"R"},{"name":"饶明","phone":"18853889099","zkey":"R"}]},{"zkey":"S","children":[{"name":"苏飞舟","phone":"18853889099","zkey":"S"},{"name":"孙仕峰","phone":"18853889099","zkey":"S"},{"name":"孙英华","phone":"18853889099","zkey":"S"},{"name":"孙兆男","phone":"18853889099","zkey":"S"},{"name":"宋贺琪","phone":"18853889099","zkey":"S"},{"name":"宋振波","phone":"18853889099","zkey":"S"},{"name":"石晓芳","phone":"18853889099","zkey":"S"},{"name":"史春彦","phone":"18853889099","zkey":"S"},{"name":"施月琴","phone":"18853889099","zkey":"S"}]},{"zkey":"T","children":[{"name":"谭勇","phone":"18853889099","zkey":"T"},{"name":"唐志超","phone":"18853889099","zkey":"T"},{"name":"唐振林","phone":"18853889099","zkey":"T"},{"name":"唐菊","phone":"18853889099","zkey":"T"}]},{"zkey":"U","children":[]},{"zkey":"V","children":[]},{"zkey":"W","children":[{"name":"王志强","phone":"18853889099","zkey":"W"},{"name":"王美珍","phone":"18853889099","zkey":"W"},{"name":"王霞","phone":"18853889099","zkey":"W"},{"name":"武旭宏","phone":"18853889099","zkey":"W"},{"name":"王志伟","phone":"18853889099","zkey":"W"},{"name":"王志刚","phone":"18853889099","zkey":"W"},{"name":"王朝","phone":"18853889099","zkey":"W"},{"name":"王桂凤","phone":"18853889099","zkey":"W"},{"name":"王赛 ","phone":"18853889099","zkey":"W"},{"name":"王会英","phone":"18853889099","zkey":"W"},{"name":"王志刚","phone":"18853889099","zkey":"W"},{"name":"王晓丽","phone":"18853889099","zkey":"W"},{"name":"王雪","phone":"18853889099","zkey":"W"},{"name":"王胜晓","phone":"18853889099","zkey":"W"},{"name":"乌彩春","phone":"18853889099","zkey":"W"},{"name":"王兴峰","phone":"18853889099","zkey":"W"},{"name":"万泓钰","phone":"18853889099","zkey":"W"},{"name":"王志强（长治进货账号）","phone":"18853889099","zkey":"W"},{"name":"王志峰","phone":"18853889099","zkey":"W"},{"name":"王晓东","phone":"18853889099","zkey":"W"},{"name":"武奇","phone":"18853889099","zkey":"W"},{"name":"王永海","phone":"18853889099","zkey":"W"},{"name":"温强","phone":"18853889099","zkey":"W"},{"name":"吴封康","phone":"18853889099","zkey":"W"},{"name":"王诚","phone":"18853889099","zkey":"W"},{"name":"武花占","phone":"18853889099","zkey":"W"},{"name":"王花梅","phone":"18853889099","zkey":"W"},{"name":"王延萍","phone":"18853889099","zkey":"W"}]},{"zkey":"X","children":[{"name":"肖嶺","phone":"18853889099","zkey":"X"},{"name":"肖凤玲","phone":"18853889099","zkey":"X"},{"name":"肖彬","phone":"18853889099","zkey":"X"},{"name":"谢箐","phone":"18853889099","zkey":"X"},{"name":"肖木珍","phone":"18853889099","zkey":"X"},{"name":"项玉","phone":"18853889099","zkey":"X"},{"name":"谢伟辉","phone":"18853889099","zkey":"X"},{"name":"徐畅","phone":"18853889099","zkey":"X"},{"name":"薛丽娜","phone":"18853889099","zkey":"X"},{"name":"谢学灵","phone":"18853889099","zkey":"X"},{"name":"胥正祥","phone":"18853889099","zkey":"X"}]},{"zkey":"Y","children":[{"name":"杨占武","phone":"18853889099","zkey":"Y"},{"name":"杨丽莉","phone":"18853889099","zkey":"Y"},{"name":"叶希伟","phone":"18853889099","zkey":"Y"},{"name":"闫增志","phone":"18853889099","zkey":"Y"},{"name":"杨云","phone":"18853889099","zkey":"Y"}]},{"zkey":"Z","children":[{"name":"张林","phone":"18853889099","zkey":"Z"},{"name":"张世强","phone":"18853889099","zkey":"Z"},{"name":"赵春花","phone":"18853889099","zkey":"Z"},{"name":"周峰","phone":"18853889099","zkey":"Z"},{"name":"赵有兰","phone":"18853889099","zkey":"Z"},{"name":"赵三梅","phone":"18853889099","zkey":"Z"},{"name":"赵春瑞","phone":"18853889099","zkey":"Z"},{"name":"张立军","phone":"18853889099","zkey":"Z"},{"name":"张阳","phone":"18853889099","zkey":"Z"},{"name":"赵洪全","phone":"18853889099","zkey":"Z"},{"name":"朱雷","phone":"18853889099","zkey":"Z"},{"name":"周明","phone":"18853889099","zkey":"Z"},{"name":"张如意","phone":"18853889099","zkey":"Z"},{"name":"周丽","phone":"18853889099","zkey":"Z"},{"name":"赵龙飞","phone":"18853889099","zkey":"Z"},{"name":"赵德芳","phone":"18853889099","zkey":"Z"},{"name":"赵飞","phone":"18853889099","zkey":"Z"},{"name":"邹昌明","phone":"18853889099","zkey":"Z"},{"name":"张兵兵","phone":"18853889099","zkey":"Z"},{"name":"钟富贵","phone":"18853889099","zkey":"Z"},{"name":"张建伟","phone":"18853889099","zkey":"Z"},{"name":"赵勇革","phone":"18853889099","zkey":"Z"},{"name":"祝木深","phone":"18853889099","zkey":"Z"},{"name":"赵华斌","phone":"18853889099","zkey":"Z"},{"name":"周吉海","phone":"18853889099","zkey":"Z"},{"name":"张世强","phone":"18853889099","zkey":"Z"},{"name":"赵国成","phone":"18853889099","zkey":"Z"},{"name":"赵小菲","phone":"18853889099","zkey":"Z"},{"name":"张加奇","phone":"18853889099","zkey":"Z"},{"name":"张少宁","phone":"18853889099","zkey":"Z"},{"name":"周立宝","phone":"18853889099","zkey":"Z"},{"name":"支贺","phone":"18853889099","zkey":"Z"}]},{"zkey":"#","children":[{"name":"asd","phone":"18853889099","zkey":"#"},{"name":"3455","phone":"18853889099","zkey":"#"},{"name":"*3dd","phone":"18853889099","zkey":"#"},{"name":"tyuuu","phone":"18853889099","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>

​​​
​

技术咨询-F

支持。可以上传到模块store

https://docs.apicloud.com/Module ... pment-specification