码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-30 00:36:22      阅读:941      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!