使用APICloud AVM框架封装通讯录组件-阿里云开发者社区

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

2022-05-09 175

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

效果展示

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