wxcontacts 该插件封装了防微信联系人侧滑字母,对应跳转到相应联系人位置;
依赖第三方插件:
Vue.js实现数据渲染
需要对应先转换成需要的json数据格式:
参照下:
[{ "key": "A", "data": [{ "img": "./image/icon_pic.jpg", "name": "阿力", "id": "110000", }, { "img": "./image/icon_pic.jpg", "name": "阿里", "id": "110100", }, { "img": "./image/icon_pic.jpg", "name": "阿嗨", "id": "110200", }, { "img": "./image/icon_pic.jpg", "name": "阿锋", "id": "110300", }] }, { "key": "B", "data": [{ "img": "./image/icon_pic.jpg", "name": "保利", "id": "120097", }, { "img": "./image/icon_pic.jpg", "name": "保里", "id": "120098", }, { "img": "./image/icon_pic.jpg", "name": "保嗨", "id": "120099", }, { "img": "./image/icon_pic.jpg", "name": "保锋", "id": "120100", }] }, { "key": "C", "data": [{ "img": "./image/icon_pic.jpg", "name": "朝利", "id": "130097", }, { "img": "./image/icon_pic.jpg", "name": "朝里", "id": "130098", }, { "img": "./image/icon_pic.jpg", "name": "朝嗨", "id": "130099", }, { "img": "./image/icon_pic.jpg", "name": "朝锋", "id": "130100", }] }]
具体使用方法已经在wxcontacts.html,文件添加了注释