使用工具:HBuilder,这个软件开发效率非常高；
需求：手机通讯录页面,有字母拼音检索功能，如下图
解析：利用mui框架的index list组件即可搭建这个页面,可参考教程UI组件(这个页面很简单，我在谷百都很少人写这个东西，估计太简单没人写，有经验的大佬任意吐槽这篇菜鸡文章）
项目结构：
mui框架形成主页面：addressList.html
<!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></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
.oa-contact-cell.mui-table .mui-table-cell {
padding: 10px 0;
vertical-align: middle;
}
.oa-contact-cell {
position: relative;
margin: -11px 0;
}
.oa-contact-avatar {
width: 75px;
}
.oa-contact-avatar img {
border-radius: 50%;
width: 50px;
height: 50px;
}
.oa-contact-content {
width: 100%;
}
.oa-contact-name {
margin-right: 20px;
}
.oa-contact-name,
.oa-contact-position {
float: left;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">通讯录</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>
</div>
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
<li data-value="ZHA" data-tags="AoTeMan" class="mui-table-view-cell mui-indexed-list-item">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="images/44444.png" onclick="update();" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">奥特曼</h4>
<span class="oa-contact-position mui-h6">开发商</span>
</div>
<p class="oa-contact-address mui-h6">
师院9栋426
</p>
</div>
</div>
</div>
</li>
<li data-value="ZHA" data-tags="WangCai" class="mui-table-view-cell mui-indexed-list-item">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="images/111.png" onclick="update();" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">旺财</h4>
<span class="oa-contact-position mui-h6">管理人员</span>
</div>
<p class="oa-contact-address mui-h6">
科院7栋225
</p>
</div>
</div>
</div>
</li>
<li data-value="ZHA" data-tags="XiaoMing" class="mui-table-view-cell mui-indexed-list-item">
<div class="mui-slider-cell">
<div class="oa-contact-cell mui-table">
<div class="oa-contact-avatar mui-table-cell">
<img src="images/33333.png" onclick="update();" />
</div>
<div class="oa-contact-content mui-table-cell">
<div class="mui-clearfix">
<h4 class="oa-contact-name">小明</h4>
<span class="oa-contact-position mui-h6">用户</span>
</div>
<p class="oa-contact-address mui-h6">
浍河欣城40栋2401
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.indexedlist.js"></script>
<script src="js/jquery-1.8.3.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');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.indexedList = new mui.IndexedList(list);
});
function update(){
open("personInformation_show.html");
}
</script>
</body>
</html>css渲染文件mui.indexedlist.css：
.mui-indexed-list {
position: relative;
border-top: solid 1px #e3e3e3;
border-bottom: solid 1px #e3e3e3;
overflow: hidden;
background-color: #fafafa;
height: 300px;
cursor: default;
}
.mui-indexed-list-inner {
margin: 0px;
padding: 0px;
overflow-y: auto;
border: none;
}
.mui-indexed-list-inner::-webkit-scrollbar {
width: 0px;
height: 0px;
visibility: hidden;
}
.mui-indexed-list-empty-alert,
.mui-indexed-list-inner.empty ul {
display: none;
}
.mui-indexed-list-inner.empty .mui-indexed-list-empty-alert {
display: block;
}
.mui-indexed-list-empty-alert {
padding: 30px 15px;
text-align: center;
color: #ccc;
padding-right: 45px;
}
.mui-ios .mui-indexed-list-inner {
width: calc(100% + 10px);
}
.mui-indexed-list-group,
.mui-indexed-list-item {
padding-right: 45px;
}
.mui-ios .mui-indexed-list-group,
.mui-ios .mui-indexed-list-item,
.mui-ios .mui-indexed-list-empty-alert {
padding-right: 55px;
}
.mui-indexed-list-group {
background-color: #f7f7f7;
}
.mui-indexed-list-group {
padding-top: 3px;
padding-bottom: 3px;
}
.mui-indexed-list-search {
border-bottom: solid 1px #e3e3e3;
z-index: 15;
}
.mui-indexed-list-search.mui-search:before {
margin-top: -10px;
}
.mui-indexed-list-search input {
border-radius: 0px;
margin: 0px;
background-color: #fafafa;
}
.mui-indexed-list-bar {
width: 23px;
background-color: lightgrey;
position: absolute;
height: 100%;
z-index: 10;
right: 0px;
-webkit-transition: .2s;
}
.mui-indexed-list-bar a {
display: block;
text-align: center;
font-size: 11px;
padding: 0px;
margin: 0px;
line-height: 15px;
color: #aaa;
}
.mui-indexed-list-bar.active {
background-color: rgb(200,200,200);
}
.mui-indexed-list-bar.active a {
color: #333;
}
.mui-indexed-list-bar.active a.active {
color: #007aff;
}
.mui-indexed-list-alert {
position: absolute;
z-index: 20;
background-color: rgba(0, 0, 0, 0.5);
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
border-radius: 40px;
text-align: center;
line-height: 80px;
font-size: 35px;
color: #fff;
display: none;
-webkit-transition: .2s;
}
.mui-indexed-list-alert.active {
display: block;
}js文件:mui.indexedlist.js
/**
* IndexedList
* 类似联系人应用中的联系人列表，可以按首字母分组
* 右侧的字母定位工具条，可以快速定位列表位置
**/
(function($, window, document) {
var classSelector = function(name) {
return '.' + $.className(name);
}
var IndexedList = $.IndexedList = $.Class.extend({
/**
* 通过 element 和 options 构造 IndexedList 实例
**/
init: function(holder, options) {
var self = this;
self.options = options || {};
self.box = holder;
if (!self.box) {
throw "实例 IndexedList 时需要指定 element";
}
self.createDom();
self.findElements();
self.caleLayout();
self.bindEvent();
},
createDom: function() {
var self = this;
self.el = self.el || {};
//styleForSearch 用于搜索，此方式能在数据较多时获取很好的性能
self.el.styleForSearch = document.createElement('style');
(document.head || document.body).appendChild(self.el.styleForSearch);
},
findElements: function() {
var self = this;
self.el = self.el || {};
self.el.search = self.box.querySelector(classSelector('indexed-list-search'));
self.el.searchInput = self.box.querySelector(classSelector('indexed-list-search-input'));
self.el.searchClear = self.box.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear'));
self.el.bar = self.box.querySelector(classSelector('indexed-list-bar'));
self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a'));
self.el.inner = self.box.querySelector(classSelector('indexed-list-inner'));
self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item')));
self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li'));
self.el.alert = self.box.querySelector(classSelector('indexed-list-alert'));
},
caleLayout: function() {
var self = this;
var withoutSearchHeight = (self.box.offsetHeight - self.el.search.offsetHeight) + 'px';
self.el.bar.style.height = withoutSearchHeight;
self.el.inner.style.height = withoutSearchHeight;
var barItemHeight = ((self.el.bar.offsetHeight - 40) / self.el.barItems.length) + 'px';
self.el.barItems.forEach(function(item) {
item.style.height = barItemHeight;
item.style.lineHeight = barItemHeight;
});
},
scrollTo: function(group) {
var self = this;
var groupElement = self.el.inner.querySelector('[data-group="' + group + '"]');
if (!groupElement || (self.hiddenGroups && self.hiddenGroups.indexOf(groupElement) > -1)) {
return;
}
self.el.inner.scrollTop = groupElement.offsetTop;
},
bindBarEvent: function() {
var self = this;
var pointElement = null;
var findStart = function(event) {
if (pointElement) {
pointElement.classList.remove('active');
pointElement = null;
}
self.el.bar.classList.add('active');
var point = event.changedTouches ? event.changedTouches[0] : event;
pointElement = document.elementFromPoint(point.pageX, point.pageY);
if (pointElement) {
var group = pointElement.innerText;
if (group && group.length == 1) {
pointElement.classList.add('active');
self.el.alert.innerText = group;
self.el.alert.classList.add('active');
self.scrollTo(group);
}
}
event.preventDefault();
};
var findEnd = function(event) {
self.el.alert.classList.remove('active');
self.el.bar.classList.remove('active');
if (pointElement) {
pointElement.classList.remove('active');
pointElement = null;
}
};
self.el.bar.addEventListener($.EVENT_MOVE, function(event) {
findStart(event);
}, false);
self.el.bar.addEventListener($.EVENT_START, function(event) {
findStart(event);
}, false);
document.body.addEventListener($.EVENT_END, function(event) {
findEnd(event);
}, false);
document.body.addEventListener($.EVENT_CANCEL, function(event) {
findEnd(event);
}, false);
},
search: function(keyword) {
var self = this;
keyword = (keyword || '').toLowerCase();
var selectorBuffer = [];
var groupIndex = -1;
var itemCount = 0;
var liArray = self.el.liArray;
var itemTotal = liArray.length;
self.hiddenGroups = [];
var checkGroup = function(currentIndex, last) {
if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) {
selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
self.hiddenGroups.push(liArray[groupIndex]);
};
groupIndex = currentIndex;
itemCount = 0;
}
liArray.forEach(function(item) {
var currentIndex = liArray.indexOf(item);
if (item.classList.contains($.className('indexed-list-group'))) {
checkGroup(currentIndex, false);
} else {
var text = (item.innerText || '').toLowerCase();
var value = (item.getAttribute('data-value') || '').toLowerCase();
var tags = (item.getAttribute('data-tags') || '').toLowerCase();
if (keyword && text.indexOf(keyword) < 0 &&
value.indexOf(keyword) < 0 &&
tags.indexOf(keyword) < 0) {
selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
itemCount++;
}
if (currentIndex >= itemTotal - 1) {
checkGroup(currentIndex, true);
}
}
});
if (selectorBuffer.length >= itemTotal) {
self.el.inner.classList.add('empty');
} else if (selectorBuffer.length > 0) {
self.el.inner.classList.remove('empty');
self.el.styleForSearch.innerText = selectorBuffer.join(', ') + "{display:none;}";
} else {
self.el.inner.classList.remove('empty');
self.el.styleForSearch.innerText = "";
}
},
bindSearchEvent: function() {
var self = this;
self.el.searchInput.addEventListener('input', function() {
var keyword = this.value;
self.search(keyword);
}, false);
$(self.el.search).on('tap', classSelector('icon-clear'), function() {
self.search('');
}, false);
},
bindEvent: function() {
var self = this;
self.bindBarEvent();
self.bindSearchEvent();
}
});
//mui(selector).indexedList 方式
$.fn.indexedList = function(options) {
//遍历选择的元素
this.each(function(i, element) {
if (element.indexedList) return;
element.indexedList = new IndexedList(element, options);
});
return this[0] ? this[0].indexedList : null;
};
})(mui, window, document);代码实现到这里结束。
页面效果展示：
参考教程：http://dev.dcloud.net.cn/mui/ui/
这几天小组做了一个社区APP，感兴趣可以下载看看，入口点我