乐趣区

关于移动端:移动端过滤栏Tab组件mFilterToolbar

jiezi

挪动端开发中因为 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>

欢送你参加奉献！👏

退出移动版