在线demo：http://tangyupeng.top/dist/index.html#/phone
<template>
<div>
<my-header custom-title="通讯录" custom-fixed >
<button @touchstart="backBtn" slot="left">首页</button>
<button @touchstart="homeBtn" slot="right">+</button>
</my-header>
<my-list :user-data="userData"></my-list> <!-- 传递数据 -->
<my-alert custom-title="呼叫">
<div class="alert_btn">
<button class="aler_tbn" @touchstart="confirmBtn">确认</button>
<button class="aler_tbn" @touchstart="cancelBtn">取消</button>
</div>
</my-alert>
</div>
</template>
<script>
import Vue from 'vue';
import Vuex from 'vuex';
var userData=[
{"index":"A","users":[
{"name":"a1","tel":"13333333331"},
{"name":"a2","tel":"13333333332"},
{"name":"a3","tel":"13333333333"},
]},
{"index":"B","users":[
{"name":"b1","tel":"13333333331"},
{"name":"b2","tel":"13333333332"},
{"name":"b3","tel":"13333333333"},
]},
{"index":"C","users":[
{"name":"c1","tel":"13333333331"},
{"name":"c2","tel":"13333333332"},
{"name":"c3","tel":"13333333333"},
]},
{"index":"D","users":[
{"name":"d1","tel":"13333333331"},
{"name":"d2","tel":"13333333332"},
{"name":"d3","tel":"13333333333"},
]},
{"index":"E","users":[
{"name":"e1","tel":"13333333331"},
{"name":"e2","tel":"13333333332"},
{"name":"e3","tel":"13333333333"},
]},
{"index":"F","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"F1","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"F2","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"F3","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"F4","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
{"name":"f3","tel":"13333333333"},
]},
{"index":"F5","users":[
{"name":"f1","tel":"13333333331"},
{"name":"f2","tel":"13333333332"},
