mui 索引列表（数据动态生成）

最新推荐文章于 2021-06-10 14:26:55 发布

还未秃的收尾新手

最新推荐文章于 2021-06-10 14:26:55 发布

阅读量6.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/fearlessnesszhang/article/details/79816527

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用MUI框架实现索引列表，并通过Vue.js动态生成列表内容。包括必要的HTML结构、JavaScript初始化及样式文件引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查询过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: []
    }
});