Use the APICloud AVM framework to encapsulate the address book component

Since the address book is used in many projects, all the components of the address book are encapsulated, which realizes the function of searching by letters and making calls.

Show results

The technical point used is the scrollTo method in the scroll -view.

Pass values to components and monitor subcomponent events. For details, please refer to the official documentation

Data Format

 [{
    "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"
    }]
}]

component code

 <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>

References from other pages

 <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>

Now, APICloud is officially holding the AVM component collection competition. After passing the review, you can get a certain bonus. If you are interested, you can go and watch it. Portal: https://www.apicloud.com/activity2205