uniapp按字母顺序快速查找通讯录
效果图:
下载组件到工程对应目录引入组件:
import AddressBook from '../../components/addressBookNavigation/addressBookNavigation'
使用组件:
{{item.key}}
{{items.username}}
# 参数说明
| 参数 | 类型 | 必传 | 默认值 | 单位 | 参数说明 |
| --------------------------- | -----: | -----: | -----: | :--------|:--------------------------------------: |
| bookList | Array | true | 无 | | 通讯录名单列表 |
| letter | Array | false | [A-Z] | | 右边索引字母列表按A-Z顺序 |
| bookKeyHeight | Number | false | 80 | upx | 通讯录名单首字母显示高度 |
| bookItemHeight | Number | false | 140 | upx | 通讯录名单列表显示高度 |
| paddingRight | Number | false | 20 | upx | 右边索引字母右边距 |
| searchHeight | Number | false | 120 | upx | 搜索框高度,没有传0 |
| searchLetterTop | Number | false | 20 | upx | 右边索引距离搜索框底部距离 |
| searchLetterWidth | Number | false | 40 | upx | 右边索引显示宽度 |
| subtractiveSearchLetterHeight | Number | false | 80 | upx | 右边索引显示总高度减去的部分 |
| tabHeight | Number | false | 50 | px | 底部tab高度 |
| navHeight | Number | false | 44 | px | 导航栏高度 |
# bookList格式
bookList:[
{
key:"A",
list:[
{
id:1,
username:"a白小纯",
headImg:"/static/headimg.png"
},
{
id:2,
username:"B罗小黑",
headImg:"/static/headimg.png"
},
]
}
]