查询过mui索引列表,发现与索引相关的内容只有
<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">indexed list(索引列表)</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" style="display:none">
</div>
<form class="mui-input-group 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>xxxxxxxx</li>
<li>xxxxxxxx</li>
<li>xxxxxxxx</li>
</ul>
</form>
</div>
</div>
js:
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);
});
需要的js:mui.indexedlist.js
需要的css :mui.indexedlist.css
这是mui所自带的内容。
而当时我的需求是根据动态生成的列表,索引内容,所以进行了一些改进,但是具体是基本差不多了;主要是对 li 内容进行了修改。
<form class="mui-input-group mui-indexed-list-inner" style="margin-top: 30px;">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="list"> //vue组件
<li class="mui-table-view-cell" v-for="site in sites"> //遍历数组
<div class="mui-row" @click='custUserAllInfo(site.certNo)'>//每个数组中的值
<div class="mui-col-xs-9">
<h5 id="user_name" style="font-size: 20px;">{{site.name}}</h5>
</div>
<div class="mui-col-xs-2">
<span class="mui-icon-extra mui-icon-extra-arrowrightcricle mui-iconinput-icon" style="color: gray;">
</span>
</div>
<div class="mui-col-xs-9">
<h5>
<label id="user_tel" style="color: gray;">联系方式:{{site.tel}} </label>
</h5>
</div>
</div>
</li>
</ul>
</form>
var vueObj = new Vue({
el: '#list',
data: {
sites: []
}
});