移动端过滤栏Tab组件mFilterToolbar

移动端开发中由于mui中没有比较好用的tab组件，所以我就基于mui开发了一个tab列表组件，可以获取当前的tab并且增加了排序功能，解决了列表的常见需求
源码地址：https://github.com/booms21/mF...

mFilterToolbar

mFilterToolbar 是一款mui风格的移动端h5顶部过滤栏组件，可根据自定义的条件对列表进行过滤，支持排序、组件默认值、组件取值、角标。

使用方法：

首先引入mui和jq库，mFilterToolbar.css（mFilterToolbar的样式）

创建一个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中，保留了原本组件的结构，方便你自定义组件的样式

 
    

      

        

           筛选
        
        

           排序
        
      
      

        

           
          

            全部0
          
          

            tab10
          
          

            tab20
          
          

            tab30
          
        
        

          

            
            按热度
          
          

            按时间
          
          

            按评分
          
        
      
    
    列表...

  
  

欢迎你参与贡献！