本文共 1240 字，大约阅读时间需要 4 分钟。

使用mui框架实现通讯录页面字母拼音检索功能

开发工具

该项目使用Visual Studio Code进行开发，采用mui框架进行UI组件构建。

项目需求

页面功能需求包括：

技术实现

页面结构

页面采用mui框架的index list组件，通过以下方式实现：

核心代码

mui.init();mui.ready(function() {    var list = document.getElementById('list');    list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';    window.indexedList = new mui.IndexedList(list);});function update() {    window.location.href = 'personInformation_show.html';}

CSS样式

.mui-indexed-list {    position: relative;    border-top: 1px solid #e3e3e3;    border-bottom: 1px solid #e3e3e3;    overflow: hidden;    background-color: #fafafa;    height: 300px;    cursor: default;}.mui-indexed-list-inner::-webkit-scrollbar {    width: 0px;    height: 0px;    visibility: hidden;}

功能说明

项目结构

addressList.html├── index.js├── mui.min.js├── mui.indexedlist.js├── mui.css├── mui.indexedlist.css└── jQuery-1.8.3.js

页面效果展示

页面展示通讯录列表，支持快速搜索和字母检索功能，点击通讯录项可查看详细信息。

技术总结

项目扩展

该通讯录页面可作为社区APP的基础功能模块，参考教程可以下载查看完整实现。

转载地址：http://rlffk.baihongyu.com/