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

<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;//初始化swipervar 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