移動端開發中由於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>

歡迎你參與貢獻！👏