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

来源：互联网发布：编写c语言用什么软件编辑：程序博客网时间：2024/05/17 07:10

<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

阅读全文

0 0