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

Posted 2020-09-20 科比net

首先安装 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