标签:1.2 width swipe restrict href mod top min 回到顶部
首先安装 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中返回顶部的方法 $ionicScrollDelegate function 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
angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic
标签:1.2 width swipe restrict href mod top min 回到顶部
原文地址:http://www.cnblogs.com/kbnet/p/6919398.html