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

Posted 2022-05-10 海阔凭鱼跃_api

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

效果展示

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