仿“今日头条”导航菜单左右滑动

<div class="topmenu border-bottom-cd">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <span class="swiper-slide padding" ng-click="selectedTab($index)" ng-repeat="slide in slides" id="{{slide.id}}" style="width:auto" ng-class="{true:'font-weight-bold color-f23c39 ',false:''}[slideIndex ==$index]">{{slide.name}}</span>
      <span class="swiper-slide padding width-percentage-10" ></span>
      <span class="swiper-slide padding width-percentage-10"></span>
      <span class="swiper-slide padding width-percentage-10"></span>
      <span class="swiper-slide padding width-percentage-10"></span>
    </div>
  </div>
</div>
<ion-slide-box show-pager="false" class="has-header" on-slide-changed="slideChanged($index)">
  <ion-slide ng-repeat="slide in slides"  >
    <div class="list">
      <h2>title:{{slide.name}}</h2>
    </div>
  </ion-slide>
</ion-slide-box>

$scope.slides = [
  {name: '健康资讯',
  id:1},
  {name: '健康知识',
  id:2},
  {name: '健康问答',
  id:3},
  {name: '健康图书',
  id:4},
  {name: '健康资讯',
  id:5},
  {name: '健知识',
  id:6},
  {name: '健问答',
  id:7},
  {name: '健图书',
  id:8},
  {name: '图书',
    id:9},
  {name: '资讯',
  id:10},
  {name: '知识',
  id:11},
  {name: '问答',
  id:12},
  {name: '图书',
  id:13},
  {name: '健康资讯',
  id:14},
  {name: '健康知识',
  id:15},
  {name: '健康问答',
    id:16},
  {name: '健康图书',
  id:17},
  {name: '健康资讯',
    id:18},
];
$scope.slideIndex = 0;

//初始化swiper
var swiper = new Swiper('.swiper-container', {
  freeMode : true,
});

$scope.slideChanged = function (index) {
  $scope.slideIndex=index;
  //定位
  $location.hash( $scope.slides[index].id);
  $anchorScroll();
};
$scope.selectedTab = function (index) {
  $scope.slideIndex=index;
  //滑动索引，跳转到指定地方
  $ionicSlideBoxDelegate.slide(index)
}

使用http://www.swiper.com.cn/    
swiper.js 插件安装   npm install swiper