wxcontacts

功能描述

wxcontacts 该模块封装了防微信联系人侧滑字母,对应跳转到相应联系人位置;

依赖插件

依赖第三方插件:

Vue.js实现数据渲染

效果图

Image text

快速使用

需要对应先转换成需要的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,文件添加了注释