挪动端开发中因为mui中没有比拟好用的tab组件，所以我就基于mui开发了一个tab列表组件，能够获取以后的tab并且减少了排序功能，解决了列表的常见需要
源码地址：https://github.com/booms21/mF...
mFilterToolbar
mFilterToolbar 是一款mui格调的挪动端h5顶部过滤栏组件，可依据自定义的条件对列表进行过滤，反对排序、组件默认值、组件取值、角标。
应用办法：
首先引入mui和jq库，mFilterToolbar.css（mFilterToolbar的款式）
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet" /> <link href="css/mFilterToolbar.css" rel="stylesheet" /> <script src="js/mFilterToolbar.js"></script>创立一个mFilterToolbar实例，并传入配置项：
// 实例化一个ft对象 var ft = new mFilterToolbar({ defaultValue: { tabValue: "1",//左tab的默认值 cacheSortObj: { //右tab的排序默认值 sortName: "sortType2",//要排序的字段 sortType: "desc",//升序asc 降序desc }, }, //默认值对象 onTabClick: function (obj) { //tab点击实现后的回调函数 console.log(obj); //在这里能够调用加载列表代码... }, });留神：1.defaultValue中的属性都是必须的 2.创立实例前须要先在tc-btn中设置data-value（惟一的tab值）
ft实例中有如下办法：
getValue：
获取以后mFilterToolbar的值
initFilter：
初始化mFilterToolbar的值，并重置mFilterToolbar到初始状态
例子：
组件的DOM不写死到js中，保留了本来组件的构造，不便你自定义组件的款式
<div class="filterbox"> <div class="filter-tab"> <div class="tab-l active" data-to="tab-l"> <span> <span class="mui-icon iconfont icon-guolvqi"></span>筛选</span> </div> <div class="tab-r" data-to="tab-r"> <span> <span class="mui-icon iconfont icon-paixu"></span>排序</span> </div> </div> <div class="tab-content"> <div class="l-cont" id="tab-l"> <!-- 因为mFilterToolbar依赖data-value，须要在对应的tc-btn上data-value设置tab对应的值（惟一）--> <div class="tc-btn active" data-value="0"> 全副<span class="mui-badge mui-badge-danger allCount">0</span> </div> <div class="tc-btn" data-value="1"> tab1<span class="mui-badge mui-badge-danger countNum1">0</span> </div> <div class="tc-btn" data-value="2"> tab2<span class="mui-badge mui-badge-danger countNum2">0</span> </div> <div class="tc-btn" data-value="3"> tab3<span class="mui-badge mui-badge-danger countNum3">0</span> </div> </div> <div class="r-cont" id="tab-r" style="display: none"> <div class="tc-btn active" data-value="sortType1"> <!--排序对应的key 升序为asc 降序为desc 。 默认为asc 。点击后会toggle这两个值--> 按热度<span class="mui-icon iconfont icon-paixu1"></span> </div> <div class="tc-btn" data-value="sortType2"> 按工夫<span class="mui-icon iconfont icon-paixu1"></span> </div> <div class="tc-btn" data-value="sortType3"> 按评分<span class="mui-icon iconfont icon-paixu1"></span> </div> </div> </div> </div> <list>列表...</list> <script src="js/mFilterToolbar.js"></script> <script> // 实例化一个ft对象 var ft = new mFilterToolbar({ defaultValue: { tabValue: "1", cacheSortObj: { sortName: "sortType2", sortType: "desc", }, }, //默认值对象 onTabClick: function (obj) { //tab点击实现后的回调函数 console.log(obj); //在这里能够调用加载列表代码... }, }); </script>欢送你参加奉献！