沉浸式顶部导航栏

来源:互联网 发布:联通4g网络不好怎么办 编辑:程序博客网 时间:2024/03/28 22:37

原理:

1)要把原理view的默认header隐藏掉,<ion-view view-title="标题" hide-nav-bar='true'>
2)重新定义的<ion-header-bar>要放在</ion-content>之后,因为首先要编译ion-content指令,translucentBar指令才能从继承的父级作用域中获取ion-content的scope.$$childHead.$onScroll函数,所以<ion-header-bar>必须放在</ion-content>之后。

(1)html里

<ion-view view-title="首页" hide-nav-bar='true' >
</ion-view>

(2)html里:

<ion-header-bar class="bar-assertive bar bar-header disable-user-behavior" align-title="center" no-tap-scroll='true' translucent-bar="mycontent" translucent-color-opacity="0.01" translucent-color="rgb(228,32,18)" translucent-scroll-maxtop="88">    <div class="buttons buttons-left">        <span class="left-buttons">            <img ng-click="openLeftContent()" ng-src="{{ userHeadImg }}"                 style="margin-left: 11px; border-radius: 50%; border:1px solid #fff;width: 35px;" icon-click-round-ripple icon-round-ripple-width="20" icon-round-ripple-color="red"/>         </span>    </div>    <div class="title title-center header-item" style="left: 61px; right: 61px;">        <span class="nav-bar-title">            <div class="home_search">                <div class="item-input-wrapper homeAddSearchLabel">                    <!--<i class="icon ion-android-search placeholder-icon"></i>-->                    <input type="text" class="storeGoodsSearchInput ng-pristine ng-untouched ng-valid" placeholder="搜索宝贝" ng-model="inputContent.goodsSearchData">                    <button class="button button-clear" ng-click="homeGoodsSearch()"><i class="icon ion-android-search placeholder-icon"></i></button>                </div>            </div>        </span>    </div>    <div class="buttons buttons-right">        <span class="right-buttons">         <img style="width: 32px;margin-right: 8px" src="img/homeScan.png" ng-click="scanPay()">        </span>    </div></ion-header-bar>

(3)js里:

.directive('translucentBar', ['$ionicScrollDelegate',function($ionicScrollDelegate) {    return {        scope:false,        restrict: 'A',        replace: false,        link: function(scope, element, attrs) {            var el = angular.element(element);            var ion = angular.element(element).parent().find('ion-content').css({                top:'0'            });            var delegateHandle = attrs.translucentBar;            var translucentColorOpacity = attrs.translucentColorOpacity;            var translucentColor  = attrs.translucentColor;            var translucentScrollMaxtop = attrs.translucentScrollMaxtop;            var translucentColorTotal   = attrs.translucentColorTotal;            if(!delegateHandle) {                //throw new('please dingfine the ion-content of delegate-handle');            }            if(!translucentColorOpacity) {                //throw new('you must set translucentColorOpacity directive of the value');            }            if(!translucentColor) {                //throw new('you must set translucentColor directive of the value');            }            if(!translucentScrollMaxtop) {                translucentScrollMaxtop = 88;            }            if(!translucentColorTotal) {                translucentColorTotal = 90;            }            var rgb = translucentColor.substring(4,translucentColor.length-1);            var initCss = {                'background': "rgba("+rgb+","+translucentColorOpacity+")"            };            el.css(initCss);            var scroollTop = null;            var distance = null;            var opacity  = null;            var translucentCss = null;            scope.$$childHead.$onScroll = function() {                distance   = $ionicScrollDelegate.$getByHandle(delegateHandle).getScrollPosition();                scroollTop = distance.top;                if(scroollTop <= translucentScrollMaxtop) {                    opacity = scroollTop / translucentColorTotal;                    translucentCss = {                        'background': "rgba("+rgb+","+opacity+")"                    };                    el.css(translucentCss);                }            }        }    };}])