MUI索引列表自定义----添加热门、最近等多个模块

时间：2024-02-23 08:41:57

先看一下我们要实现的效果图

效果图片

首先我们需要引入的文件

<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/mui.indexedlist.css" rel="stylesheet" />
<script src="../js/mui.min.js"></script>
<script src="../js/mui.indexedlist.js"></script>

自定义的CSS代码

/*修改mui*/
html,body {height: 100%;overflow: hidden;}
.mui-bar {-webkit-box-shadow: none;box-shadow: none;}
.mui-icon-back:before, .mui-icon-left-nav:before{content: \'\e460\';color: #000;}
.mui-indexed-list-bar{width: 40px;background: #fff;}
.mui-indexed-list-bar.active{background: #fff;}
.mui-indexed-list-bar.active a{color: #ffd401;}
.mui-indexed-list-bar a{color: #ffd401;}
.mui-indexed-list-group{background: #fff;padding-top: 15px;padding-bottom: 15px;}
.mui-table-view-divider:after,.mui-table-view-divider:before,.mui-table-view:before{height: 0;}
.mui-indexed-list,.mui-indexed-list-search{border: none;}
/*添加class*/
.module-indexed-box{
    padding-right: 50px;
}
.module-address{
    padding:0 15px;
    padding-right: 0;
    font-size: 16px;
    color: #656566;
    background: #fff;
    height: 50px;
    line-height: 50px;
    margin: 0;
    position: relative;
}
.module-address span{
    display: block;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    height: 40px;
    line-height: 40px;
    margin-top:5px ;
    padding: 0 13px;
}
.trading-area,.recent-area{padding: 10px 15px;font-size: 0;}
.trading-area li{
    float: left;
    color: #999999;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    font-size: 16px;
    padding: 5px 8px;
    border-radius: 16px;
    margin: 10px 15px 10px 0;
}
.trading-area li.active{
    background: #fff;
    color: #000;
    border: 1px solid #ffd401;
}
.recent-area li{
    display: inline-block;
    padding: 8px 14px;
    color: #8b8b8c;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    width: 30%;
    margin-right: 5%;
    font-size: 16px;
    text-align: center;
}
.recent-area li:nth-child(3n){margin-right: 0;}
.hot-area li{margin-top: 15px;margin-bottom: 15px;}

自定义HTML代码

<div class="module-indexed-box">
    <!--定位-->
    <div>
        <p data-group="定位" class="module-address module-limit-after">
            当前定位城市
            <span class="fr">成都·<em id="trading">双楠商圈</em></span>
        </p>
        <ul class="trading-area clear">
            <li class="active">双楠商圈</li>
            <li>骡马市商圈</li>
            <li>新会展商圈</li>
            <li>会展商圈</li>
            <li>神仙树商圈</li>
            <li>火车南站商圈</li>
        </ul>
    </div>
    <!--最近访问城市-->
    <div>
        <p data-group="最近" class="module-address module-limit-before">
            最近访问城市
        </p>
        <ul class="recent-area clear">
            <li>北京</li>
            <li>成都</li>
            <li>广州</li>
        </ul>
    </div>
    <!--热门城市-->
    <div>
        <p data-group="热门" class="module-address">
            热门城市
        </p>
        <ul class="recent-area hot-area clear">
            <li>北京</li>
            <li>上海</li>
            <li>成都</li>
            <li>广州</li>
            <li>深圳</li>
            <li>杭州</li>
            <li>重庆</li>
            <li>武汉</li>
            <li>西安</li>
            <li>长沙</li>
            <li>苏州</li>
            <li>南京</li>
            <li>大连</li>
            <li>沈阳</li>
            <li>青岛</li>
        </ul>
    </div>
</div>
<!--全部城市-->
<p data-group="定位" class="module-address">
    全部城市
</p>

自定义的JS代码

//当前城市商圈选择
mui(\'.trading-area\').on(\'tap\',\'li\',function(){
    Array.from(this.parentElement.children).forEach(function(current){
        current.className = \'\';
    });
    this.className = \'active\';
    document.getElementById(\'trading\').innerText = this.innerText;
});

页面完整代码（由于实例中城市太多，每一个字母我选择一个，减少代码量）

<!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 rel="stylesheet" type="text/css" href="../css/public.css"/>
        <link href="../css/mui.indexedlist.css" rel="stylesheet" />
        <style>
            /*修改mui*/
            html,body {height: 100%;overflow: hidden;}
            .mui-bar {-webkit-box-shadow: none;box-shadow: none;}
            .mui-icon-back:before, .mui-icon-left-nav:before{content: \'\e460\';color: #000;}
            .mui-indexed-list-bar{width: 40px;background: #fff;}
            .mui-indexed-list-bar.active{background: #fff;}
            .mui-indexed-list-bar.active a{color: #ffd401;}
            .mui-indexed-list-bar a{color: #ffd401;}
            .mui-indexed-list-group{background: #fff;padding-top: 15px;padding-bottom: 15px;}
            .mui-table-view-divider:after,.mui-table-view-divider:before,.mui-table-view:before{height: 0;}
            .mui-indexed-list,.mui-indexed-list-search{border: none;}
            /*添加class*/
            .module-indexed-box{
                padding-right: 50px;
            }
            .module-address{
                padding:0 15px;
                padding-right: 0;
                font-size: 16px;
                color: #656566;
                background: #fff;
                height: 50px;
                line-height: 50px;
                margin: 0;
                position: relative;
            }
            .module-address span{
                display: block;
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                height: 40px;
                line-height: 40px;
                margin-top:5px ;
                padding: 0 13px;
            }
            .trading-area,.recent-area{padding: 10px 15px;font-size: 0;}
            .trading-area li{
                float: left;
                color: #999999;
                background: #f5f5f5;
                border: 1px solid #f5f5f5;
                font-size: 16px;
                padding: 5px 8px;
                border-radius: 16px;
                margin: 10px 15px 10px 0;
            }
            .trading-area li.active{
                background: #fff;
                color: #000;
                border: 1px solid #ffd401;
            }
            .recent-area li{
                display: inline-block;
                padding: 8px 14px;
                color: #8b8b8c;
                border: 1px solid #dbdbdb;
                border-radius: 4px;
                width: 30%;
                margin-right: 5%;
                font-size: 16px;
                text-align: center;
            }
            .recent-area li:nth-child(3n){margin-right: 0;}
            .hot-area li{margin-top: 15px;margin-bottom: 15px;}
        </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">
                    <!--此处是搜索框位置-->
                    <!--<p class="module-address">

                    </p>-->
                </div>
                <div class="mui-indexed-list-bar">
                    <a>定位</a>
                    <a>最近</a>
                    <a>热门</a>
                    <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">
                        <div class="module-indexed-box">
                            <!--定位-->
                            <div>
                                <p data-group="定位" class="module-address module-limit-after">
                                    当前定位城市
                                    <span class="fr">成都·<em id="trading">双楠商圈</em></span>
                                </p>
                                <ul class="trading-area clear">
                                    <li class="active">双楠商圈</li>
                                    <li>骡马市商圈</li>
                                    <li>新会展商圈</li>
                                    <li>会展商圈</li>
                                    <li>神仙树商圈</li>
                                    <li>火车南站商圈</li>
                                </ul>
                            </div>
                            <!--最近访问城市-->
                            <div>
                                <p data-group="最近" class="module-address module-limit-before">
                                    最近访问城市
                                </p>
                                <ul class="recent-area clear">
                                    <li>北京</li>
                                    <li>成都</li>
                                    <li>广州</li>
                                </ul>
                            </div>
                            <!--热门城市-->
                            <div>
                                <p data-group="热门" class="module-address">
                                    热门城市
                                </p>
                                <ul class="recent-area hot-area clear">
                                    <li>北京</li>
                                    <li>上海</li>
                                    <li>成都</li>
                                    <li>广州</li>
                                    <li>深圳</li>
                                    <li>杭州</li>
                                    <li>重庆</li>
                                    <li>武汉</li>
                                    <li>西安</li>
                                    <li>长沙</li>
                                    <li>苏州</li>
                                    <li>南京</li>
                                    <li>大连</li>
                                    <li>沈阳</li>
                                    <li>青岛</li>
                                </ul>
                            </div>
                        </div>
                        <!--全部城市-->
                        <p data-group="全部" class="module-address">
                            全部城市
                        </p>
                        <li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
                        <li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">安阳</li>
                        <li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item">安顺</li>
                        <li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item">安庆</li>
                        <li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item">安山</li>
                        <li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
                        <li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item">保山机场</li>
                        <li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
                        <li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item">长白山机场</li>
                        <li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
                        <li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed-list-item">大理机场</li>
                        <li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
                        <li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item">鄂尔多斯机场</li>
                        <li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
                        <li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item">阜阳西关机场</li>
                        <li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
                        <li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-indexed-list-item">赣州黄金机场</li>
                        <li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
                        <li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item">哈尔滨太平国际机场</li>
                        <li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
                        <li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item">济南遥墙国际机场</li>
                        <li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
                        <li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-indexed-list-item">喀什机场</li>
                        <li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
                        <li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-indexed-list-item">拉萨贡嘎机场</li>
                        <li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
                        <li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-indexed-list-item">满洲里西郊机场</li>
                        <li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
                        <li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item">南昌昌北国际机场</li>
                        <li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
                        <li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item">普洱思茅机场</li>
                        <li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
                        <li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-indexed-list-item">齐齐哈尔三家子机场</li>
                        <li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
                        <li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item">日喀则和平机场</li>
                        <li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
                        <li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item">三亚凤凰国际机场</li>
                        <li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
                        <li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-indexed-list-item">塔城机场</li>
                        <li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
                        <li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-indexed-list-item">万州五桥机场</li>
                        <li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
                        <li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item">西安咸阳国际机场</li>
                        <li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
                        <li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item">延安二十里堡机场</li>
                        <li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
                        <li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-indexed-list-item">湛江机场</li>                      
                    </ul>
                </div>
            </div>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../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\');
                //calc hieght
                list.style.height = (document.body.offsetHeight - header.offsetHeight) + \'px\';
                //create
                window.indexedList = new mui.IndexedList(list);
                //当前城市商圈选择
                mui(\'.trading-area\').on(\'tap\',\'li\',function(){
                    Array.from(this.parentElement.children).forEach(function(current){
                        current.className = \'\';
                    });
                    this.className = \'active\';
                    document.getElementById(\'trading\').innerText = this.innerText;
                });
            });
        </script>
    </body>

</html>

原生JS–inedxed-list.js修改

  1. 将条件group && group.length == 1 修改为 group（在inedxed-list.js的85行）

    原因：由于添加的模块一般都是热门等汉字，此处字符串的长度就不完全是1所以要修改，从而使其触发定位函数。

  2. 将self.el.bar.offsetHeight - 40修改为 self.el.bar.offsetHeight - self.el.search.offsetHeight（在inedxed-list.js的57行）

    原因：此处代码是用来计算我们右侧导航条中每一个字母所占高度，此处mui源代码将搜索框的40px的高度固定的计算进去了，所以如果不修改，会导致导航始终错误，采用修改后的方式是不会影响其他，搜索框存在与否计算都是正确的。

  3. 如果不要搜索栏，就要将self.bindSearchEvent();禁止（在inedxed-list.js的174行）

    原因：如果我们不需要搜索，绑定事件就会报错，此处如果要搜索我们就放开代码，不需要就禁止，不影响其他代码的执行。

demo效果预览

demo的CSDN下载

demo的JQ22下载

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表