angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic_综合

首先安装 swiper npm install --save swiper 或者 bower install --save swiper

<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" />
<script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>

指令文件代码

(function() {'use strict';angular.module('campus.core').directive('swiperSlide',swiperSlide).directive('goToTop',goToTop);swiperSlide.$inject = ['$timeout'];function swiperSlide($timeout) {return {restrict: "EA",link: function(scope, element, attrs) { $timeout(function(){var swiper2 = new Swiper('.swiper-container2', {slidesPerView: 'auto',freeMode: true}); },100); }};}goToTop.$inject = ['$ionicScrollDelegate','$timeout']; //ionic中返回顶部的方法 $ionicScrollDelegatefunction goToTop($ionicScrollDelegate,$timeout) { return {restrict: "EA",scope: {reload: "&"},template: '<span id="goToTop" class="goToTop"></span>',link: function(scope, element, attrs) {element.bind('click',function(){$timeout(function(){var scroll = parseInt(document.getElementById('goToTop').offsetTop) - parseInt($ionicScrollDelegate.getScrollPosition().top);var scroll = scroll-document.getElementById('goToTop').offsetTop;$ionicScrollDelegate.resize();$ionicScrollDelegate.scrollBy(0,scroll,true); //大于两页时显示分页 },100);})}};}})();

回到顶部的逻辑

回到顶部对应的对应html中的内容

<go-to-top></go-to-top>

回到顶部按钮css文件

.goToTop{width:4.17rem;height: 4.17rem;position: fixed;bottom:2.6rem;right: 1.25rem;z-index: 11;background: url(../assets/images/goToTop.png) no-repeat;background-size: contain;display: none;} .goToTop.none{display: none;}

左右滑动对应的html代码

<div class="index-tab zw-tab s15"><ul class="swiper-wrapper"><li class="swiper-slide" ng-repeat="items in vm.data" ng-click="vm.switchType(items.type,$index)"><span ng-class="{'active':$index==vm.typeOn}">{{items.typeName}}</span></li></ul></div>

 vm= this;
vm.typeOn = 0; //默认第一个高亮显示
 vm.switchType =function(type,index){vm.typeOn = index;vm.type = type;initList(type,0); //类型对应的数据请求}

$ionicScrollDelegate