ionic实现滑动选择栏

本次记录一下项目中使用到的滑动选择栏的功能，感觉效果还可以。如有问题，还请大佬指出，将进行改正。新手理解可能不深刻，还请见谅。

实现后的效果图

代码实现

所使用的是ionic滚动条ion-scroll标签，它用于创建可滚动的容器。将要添加的内容放到此标签内。

html代码部分

<ion-header class="hh">
  <div class="head">
    <div class="head-name">
      Demo
    </div>
	<ion-scroll scrollX="true" scroll-ys>
	  <div style="width:11111px;" id="div-scroll">
	    <span class="fl fl-active" id="rec">推荐</span>
	    <span class="fl fl-active" id="act1">活动1</span>
	    <span class="fl fl-active" id="act2">活动2</span>
	    <span class="fl fl-active" id="act3">活动3</span>
	    <span class="fl fl-active" id="act4">活动4</span>
	    <span class="fl fl-active" id="act5">活动5</span>
	    <span class="fl fl-active" id="act6">活动6</span>
	    <span class="fl fl-active" id="act7">活动7</span>
	  </div>
	</ion-scroll>
	</div>
</ion-header>

<ion-content>
	<!--页面内容-->
</ion-content>

css相关代码部分

[scroll-ys] {
    width: 100%;
    margin-top: 1rem;
    height: 45px;
    background-color: #fff;
    border-bottom: 1px solid #dadada;
  }
  [fl-active ] {
    padding: 10px;
    float: left;
    border-bottom: 3px solid #2773fd;
    margin: 0 5px;
  }
  .fl-active {
    padding: 0.8rem;
    float: left;
    border-bottom: 3px solid #CD3429;
    margin: 5px;
  }
  //非点击状态的显示
  .fl {
    padding: 10px;
    float: left;
    margin: 4px 5px;
  }
  [fl] {
    padding: 10px;
    float: left;
    margin: 0 5px;
  }

js代码部分（js代码是添加点击事件使用的）。

ionViewDidEnter() {
  $(".fl-active").removeClass("fl-active");//移除样式
  $("#rec").addClass("fl-active");//添加样式
  this.changeTabs();//页面初始化
}

changeTabs() {
  //添加点击事件
  $(".fl").click(function () {
    var val = $(this).text();//获取文本内容
    var prid = $(this).attr("id");//获取id
    $(".fl-active").removeClass("fl-active");//移除样式
    $(this).addClass("fl-active");//添加样式
    if(prid == 'rec'){//推荐
      //推荐内容
    }else if(prid == 'act1'){//活动1
      //活动1
    }else if(prid == 'act2'){//活动2
      //活动2
    }else if(prid == 'act3'){//活动3
      //活动3
    }else if(prid == 'act4'){//活动4
      //活动4
    }else if(prid == 'act5'){//活动5
      //活动5
    }else if(prid == 'act6'){//活动6
      //活动6
    }else if(prid == 'act7'){//活动7
      //活动7
    }
  });
}

通过上述代码即可实现上图中的效果，有兴趣的朋友可以试一下，还是不错的。??(^ __^)