本文分享了一款使用MUI框架构建的手机社交应用通讯录列表页面的源码，该页面包含字母索引快速定位和关键字搜索功能。用户可以通过搜索框查找联系人，或者通过字母栏快速跳转到相应姓名开头的联系人列表。源码适用于移动端社交应用的开发，提供了一种高效友好的用户界面实现。
大家好，今天给大家介绍一款，使用基于MUI制作手机社交app通讯录列表页面源码（图1）。送给大家哦，获取方式在本文末尾。
图1
带英文字母索引快速定位（图2）
图2
带关键字搜索（图3）
图3
部分代码：（完整源码获取请看本文末尾）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>社交APP好友列表</title>
<link href="statics/css/mui.min.css" rel="stylesheet" />
<link href="statics/css/mui.indexedlist.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css"/>
<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">通讯录<i></i></h1>
</header>
<div class="mui-content">
<div id='list' class="mui-indexed-list">
<div class="mui-indexed-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索">
</div>
<div class="mui-indexed-list-bar">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
<a>#</a>
</div>
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<!--新朋友-->
<div class="new-firend">
<p><i class="head"></i><span>新朋友</span></p>
<i class="badge">3</i>
</div>
<!--群聊-->
<div class="group">
<p><i class="head"></i><span>创建群聊</span></p>
</div>
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AXM" data-tags="axiaoming" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head1.png"/>
<div class="desc">
<p class="name vip">啊晓明<i></i></p>
<p class="remark">每个人的幸福不同，为什么要求自己世界不真理...</p>
</div>
</li>
<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
<li data-value="BFJ" data-tags="bilaoye" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head2.png"/>
<div class="desc">
<p class="name">毕姥爷<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-value="BJS" data-tags="bijiasuo" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head3.png"/>
<div class="desc">
<p class="name">毕加索<i></i></p>
<p class="remark">世界上一成不变的东西，只有“任何事物世”这条...</p>
</div>
</li>
<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
<li data-value="CL" data-tags="cluo" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">C罗<i></i></p>
<p class="remark">世界上一成不变的东西，只有“任何事物世”这条...</p>
</div>
</li>
<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
<li data-value="DST" data-tags="dishitian" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">帝释天<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
<li data-value="EZT" data-tags="yizhongtian" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head6.png"/>
<div class="desc">
<p class="name">易中天<i></i></p>
<p class="remark">每个人的幸福不同，为什么要求自己世界不真理...</p>
</div>
</li>
<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
<li data-value="FDT" data-tags="fangdatong" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head3.png"/>
<div class="desc">
<p class="name">方大同<i></i></p>
<p class="remark">每个人的幸福不同，为什么要求自己世界不真理...</p>
</div>
</li>
<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
<li data-value="GZB" data-tags="gezhouba" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head1.png"/>
<div class="desc">
<p class="name">葛洲坝<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
<li data-value="HXM" data-tags="huangxiaoming" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head1.png"/>
<div class="desc">
<p class="name">黄晓明<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-value="HB" data-tags="huangbo" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head2.png"/>
<div class="desc">
<p class="name">黄渤<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="I" class="mui-table-view-divider mui-indexed-list-group">I</li>
<li data-value="I" data-tags="idea" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head2.png"/>
<div class="desc">
<p class="name">idea<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
<li data-value="JN" data-tags="jinan" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head2.png"/>
<div class="desc">
<p class="name">济南<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
<li data-value="KX" data-tags="kangxi" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head3.png"/>
<div class="desc">
<p class="name">康熙<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
<li data-value="LDH" data-tags="liudehua" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">刘德华<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
<li data-value="MDL" data-tags="maidanglao" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">麦当劳<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
<li data-value="NQ" data-tags="niuqun" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">牛群<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="O" class="mui-table-view-divider mui-indexed-list-group">O</li>
<li data-value="OP" data-tags="open" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">open<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
<li data-value="PYL" data-tags="pingyeling" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">平野绫<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
<li data-value="QDD" data-tags="qianduoduo" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head4.png"/>
<div class="desc">
<p class="name">钱多多<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
<li data-value="REM" data-tags="rierman" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">日耳曼<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
<li data-value="SY" data-tags="sanyi" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">三一<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
<li data-value="TC" data-tags="tianci" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">天赐<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="U" class="mui-table-view-divider mui-indexed-list-group">U</li>
<li data-value="UC" data-tags="uckefu" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">UC客服<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="V" class="mui-table-view-divider mui-indexed-list-group">V</li>
<li data-value="VZS" data-tags="vzisha" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">V字杀<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
<li data-value="WLW" data-tags="wanglaowu" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head5.png"/>
<div class="desc">
<p class="name">王老五<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
<li data-value="XMQ" data-tags="ximenqing" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head6.png"/>
<div class="desc">
<p class="name">西门庆<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
<li data-value="YSK" data-tags="yuanshikai" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head6.png"/>
<div class="desc">
<p class="name">袁世凯<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
<li data-value="ZZD" data-tags="zhenzidan" class="mui-table-view-cell mui-indexed-list-item">
<img src="statics/images/head6.png"/>
<div class="desc">
<p class="name">甄子丹<i></i></p>
<p class="remark">时间是一切财富中最宝贵的财富。</p>
</div>
</li>
<li data-group="#" class="mui-table-view-divider mui-indexed-list-group">#</li>
</ul>
</div>
</div>
<div class="bar-holder"></div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item">
<span class="icon icon-message"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item mui-active">
<span class="icon icon-book"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item">
<span class="icon icon-find"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item">
<span class="icon icon-my"></span>
<span class="mui-tab-label">我</span>
</a>
</nav>
</div>
<script src="statics/js/mui.min.js"></script>
<script src="statics/js/mui.indexedlist.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function() {
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
//设置列表高度
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//初始化索引列表
window.indexedList = new mui.IndexedList(list);
});
</script>
</body>
</html>本源码编码：10110，需要的朋友，点击下面的链接后，搜索10110，即可获取。
扫一扫
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
